Using a magnifying glass made with HTML5 and CSS3

Using a magnifying glass made with HTML5 and CSS3

1. HTML structure

   <Divclass= "Wrap">            <Divclass= "Move">                <ulclass= "Pic">                    <Li><imgsrc= "Img/ibannertext.png" /></Li>                    <Li><imgsrc= "Img/ibannertext2.png" /></Li>                    <Li><imgsrc= "Img/ibannertext3.png" /></Li>                </ul>                <Divclass= "Zoompic">                    <Divclass= "Mask_pic">                        <Divclass= "Pic">                        </Div>                        <Divclass= "Mask">                        </Div>                    </Div>                </Div>            </Div>            <ulclass= "text">                <Li><imgsrc= "Img/icoursetabtext.png" /></Li>                <Li><imgsrc= "Img/icoursetabtext2.png" /></Li>                <Li><imgsrc= "Img/icoursetabtext3.png" /></Li>            </ul>            <ulclass= "Botton">                <Liclass= "Active"><span></span></Li>                <Li><span></span></Li>                <Li><span></span></Li>            </ul>        </Div>

2. Style

   Body,ul,li {padding:0;margin:0;} UL {List-style:none;}. Wrap {margin:50px auto;width:365px;position:relative;border:2px solid firebrick;vertical-align:center;}. Wrap. pic {position:relative;height:80px;width:100%;}. Wrap. pic Li {position:absolute;top: -80px;-webkit-transition:0.5s;transition:0.5s;opacity:0;}. Wrap. Text {position:relative;top:0px;left:0;height:45px;width:100%;margin-top:30px;}. Wrap. Text li {position:absolute;left:365px;-webkit-transition:0.5s;transition:0.5s;opacity:0;}. Wrap. Botton {position:relative;bottom:0px;height:21px;right:0px;width:75px;left:280px;}. Wrap. Botton li {float:left;height:100%;width:20px;margin:0px 5px 0px 0px;background-image:url (Img/icoursetabbtnshad Ow.png); background-repeat:no-repeat;}. Wrap. Botton span {Display:block;height:100%;background-position:center 2px;background-repeat:no-repeat; Background-image:url (img/icourseico.png);-webkit-transform:scale (0); Transform:scale (0); transition:0.3s;}. Wrap. Botton. Active span {-webkit-transform:scale (1); Transform:scale (1);}. zoompic {position:absolute;height:172px;width:144px;top:0px;left: -85px;background-image:url (img/iZoom.png); Background-repeat:no-repeat;overflow:hidden;top: -13px;-webkit-transform-origin:6px 166px;/*-webkit-transform: Rotate ( -30deg); */transition:0.3s;}. Zoompic. Mask_pic{height:96px;width:96px;position:absolute;left:43px;top:3px;background-color: #FFFFFF; border-radius:50%;}. Zoompic. pic {position:absolute;height:96px;width:96px;background-image:url (img/ibannertextbig.png); background-repeat:no-repeat;left:0px;top:0;border-radius:50%;background-position:40px 0px;transition:0.5s Linear */* Rotation base */-webkit-transform-origin:-36px 165px relative to Zoompic,/*-webkit-transform:rotate (30deg); */}.zoompic. Mask { border-radius:50%;p Osition:absolute;left:0px;top:0;height:96px;width:96px;background-image:url (img/ Izoomglass.png); background-repeat:no-repeat;}. move{position:relative; z-num:5;}

   　

3. The Great JS is here.

   <script>            $(function() {                varBtnlist = $ (". Botton"). Find (' Li '); varPiclist = $ ('. pic '). Find (' Li '); varTextlist = $ ('. Text '). Find (' Li '); varnum = 0varASRC = ["Img/ibannertextbig.png", "Img/ibannertextbig2.png", "Img/ibannertextbig3.png"]; //InitializePiclist.eq (0). css ({' Top ': 0,                    ' Opacity ': 1                }); Textlist.eq (0). css ({' Left ': 0,                    ' Opacity ': 1}) Btnlist.bind (' Click ',function() {num= $( This). index (); $ (btnlist). Removeclass ("Active"); $( This). addclass (' active '); //move the Magnifier firstToscale (); //Tohidden (num);                        //end (num);                })                //InitializeZoommove (0); //magnifying Glass$ ('. Move '). Bind (' MouseMove ',function(EV) {varPICL = $ ( This). Offset (). Left; varPicT = $ ( This). Offset (). Top; varW = $ ( This). width (); varh=$ ( This). Height (); varEvX =Ev.clientx; varEvY =Ev.clienty; if(Evx>=picl && (picl + w>=evx) && (pict+h >=EvY)) {Zoommove (EvX-picl); }Else{                        //back to the original position when the mouse is not in the moving rangeSetTimeout (function() {Zoommove (0); },500)                    }                                    })                        functionToscale () {$ ('. Zoompic '). css ({' Webkittransform ': ' Rotate ( -60deg) '                })                $('. Zoompic. pic '). css ({' Webkittransform ': ' Rotate (60deg) '                })                                $('. Zoompic. pic '). Bind (' Webkittransitionend ',function(){                    //Toggle Background Image$( This). css ({' backgroundimage ': ' url (' +asrc[num]+ ') '                    })                    /*=============*/                    $( This). Unbind ("Webkittransitionend");                Tohidden (num); })            }            functionZoommove (x) {//position of magnifying Glass center                varCenterX = 96; varXScale = (424/363). toFixed (2);varPICW = $ ('. Mask_pic >.pic '). width (); Console.log (PICW) $ ('. Mask_pic >. pic '). css ({' backgroundposition ':-xscale*x+picw/2+ "px 0px"                })                                $(". Zoompic"). css ({' webkittransition ': ' 0s ',///Here Remember to remove the speed of the shadow Magnifier move' Left ': XCenterX}) }            //the hiding of pictures and words            functionTohidden () {piclist.css ({"Webkittransition": ' 0.5s ',                    "Top":-80,                    "Opacity": 0                }); Textlist.css ({"Webkittransition": "0.3s top, 0.3s 0.2s left, 0.3s opacity",                    "Top": 45,                    ' Left ': 365,                    ' Opacity ': 0}) Piclist.bind (' Webkittransitionend ', picshow); Textlist.bind (' Webkittransitionend ', textshow); }                        functionpicshow () {Piclist.unbind (' Webkittransitionend '); $ (Piclist[num]). css ({' Top ': 0,                    ' Opacity ': 1                })                //Removing events$ (Piclist[num]). Unbind (' Webkittransitionend ')); }            functiontextshow () {Textlist.unbind (' Webkittransitionend '); $ (Textlist[num]). css ({' Top ': 0,                    ' Left ': 0,                    ' Opacity ': 1                })                //the location of the Magnifier restore$ (Textlist[num]). Bind (' Webkittransitionend ', Toorigin)} functionToorigin () {$ ('. Zoompic '). css ({"Webkittransition": ' 0.5s ',                    ' Webkittransform ': ' Rotate (0deg) '                })                $('. Zoompic. pic '). css ({"Webkittransition": ' 0.5s ',                    ' Webkittransform ': ' Rotate (0deg) '                })                $( This). Unbind (' Webkittransitionend '); }        })        </script>

   This is the result of the-_ * 2016-11-05 23:29:52

Using a magnifying glass made with HTML5 and CSS3