Home > Developer > Web Develop
jquery supplement, Analog picture Magnifier
Html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <Linkrel= "stylesheet"href= "Css/fdj.css"></Head><Body><Divclass= "outer"> <!--Magnifier Body Div - <Divclass= "Small_box"> <!--magnifying glass area for small plots - <Divclass= "float"></Div> <!--the glass cover area in the small picture - <imgsrc= "Img/small.jpg"> </Div> <Divclass= "Big_box"> <!--magnifying glass area of large map - <imgsrc= "Img/big.jpg"> </Div></Div><Scriptsrc= "Jquery/jquery.min.js"></Script><Scriptsrc= "Fdj.js"></Script></Body></HTML>
As1
@charset "Utf-8"; *{margin:0;padding:0;}. Outer{/*Magnifier Body Div*/width:350px;Height:350px;Border:5px Solid #0f68ee;}. Outer. Small_box{/*magnifying glass area for small plots*/position:relative;}. Outer. Small_box. Float{/*glass cover in the small image area of the magnifying glass*/width:175px;Height:175px;Background-color:#ABC7E2;Opacity:0.4;position:Absolute;Display:None;}. Outer. Big_box{/*magnifying glass area of large map*/width:400px;Height:400px;Border:5px Solid #0f68ee;Overflow:Hidden;position:Absolute;Top:0; Left:370px;Display:None;}. Outer. Big_box img{position:Absolute;}
Js
/** * Created by admin on 2017/5/10.*/$(function () { //mouse Hover event when mouse hovers over small picture area$ ('. Outer. Small_box '). MouseOver (function () { $('. Outer. Small_box. Float '). CSS (' Display ', ' block ');//Displays the glass cover in the small picture area$ ('. Outer. Big_box '). CSS (' Display ', ' block ');//Show large picture area }); //when the mouse leaves the small picture area at the moment, the mouse leave event is performed$ ('. Outer. Small_box '). Mouseout (function () { $('. Outer. Small_box. Float '). CSS (' Display ', ' none ');//hide the glass cover in the small picture area$ ('. Outer. Big_box '). CSS (' Display ', ' none ');//Hide large picture area }); //when the mouse moves in the small picture area, the mouse movement event is performed$ ('. Outer. Small_box '). MouseMove (function(e) {var_event = e | | window.event;//receive event object information in Events varSmall_box_height = $ ('. Outer. Small_box '). Height ();//gets the height of the small plot area Div varSmall_box_width = $ ('. Outer. Small_box '). width ();//get the width of a small plot area div varFloat_height = $ ('. Outer. Small_box. Float '). Height ();//get the height of the glass cover in the small plot area varFloat_width = $ ('. Outer. Small_box. Float '). width ();//get the width of the glass cover in the small plot area varFloat_height_ban = $ ('. Outer. Small_box. Float '). Height ()/2; Get half the height of the glass cover in the small plot areavarFloat_width_ban = $ ('. Outer. Small_box. Float '). Width ()/2; Get half the width of the glass cover in the small plot area//conversion glass cover sliding value varMouse_left = _event.clientx-float_width_ban;//The mouse point and the left margin, minus half the glass cover, is the glass cover transverse sliding value varMouse_top = _event.clienty-float_height_ban;//The mouse point and the top margin, minus 100 of the glass cover, is the glass cover longitudinal sliding value if(Mouse_left < 0) {//glass cover Transverse sliding value, if less than 0Mouse_left = 0;//set the glass cover transverse slide value to 0}Else if(Mouse_left >small_box_width-float_width) {//to determine the horizontal sliding value of the glass cover, if it is larger than the width of the small plot area minus the width of the cover, it indicates that the horizontal slide value of the bubble has gone beyond the small plot area.Mouse_left = Small_box_width-float_width;//the horizontal sliding value of the glass cover is set to the width of the small plot area minus the width of the glass cover, that is, the transverse sliding value to the right head } if(Mouse_top < 0) {//Glass cover longitudinal sliding value, if less than 0mouse_top = 0;//Slide the glass cover to the vertical value, set to 0}Else if(Mouse_top >small_box_height-float_height) {//Judging the vertical sliding value of the glass cover, if it is greater than the height minus the height of the small plot area, it indicates that the vertical sliding value of the hood has gone beyond the small plot area.Mouse_top = Small_box_height-float_height;//the vertical slide value of the glass is set to the height of the small plot area minus the cover height, which is the longitudinal slide value down to the head } $('. Outer. Small_box. Float '). CSS (' left ', Mouse_left + ' px ');//get to the glass cover longitudinal slide value$ ('. Outer. Small_box. Float '). CSS (' top ', mouse_top + ' px ');//get to the glass cover transverse sliding value //conversion Large image sliding scale //Subtract the width of the large image from the large picture container div width, divided by the small picture container div width minus the glass cover width, equal to the large image reverse transverse sliding scale varPercentx = ($ ('. Outer. Big_box img '). Width ()-$ ('. Outer. Big_box '). Width ())/(Small_box_width-float_width);//subtract the height of the large picture container div height, divided by the small picture container div height minus the glass cover height, equal to the large image reverse longitudinal sliding ratio varPercenty = ($ ('. Outer. Big_box img '). Height ()-$ ('. Outer. Big_box '). Height ())/(Small_box_height-float_height); $('. Outer. Big_box img '). CSS (' left ',-percentx*mouse_left+ ' px ');//reverse transverse sliding ratio, divided by the glass cover transverse sliding value, equal to large horizontal sliding value$ ('. Outer. Big_box img '). CSS (' top ',-percenty*mouse_top+ ' px ');//reverse longitudinal slide ratio, divided by the glass cover longitudinal sliding value, equal to large portrait sliding value });});
jquery supplement, Analog picture Magnifier
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
