Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head><MetaCharSet= "Utf-8"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"><Metaname= "Viewport"content= "Width=device-width, initial-scale=1"><title>jquery Image Magnifier Plugin-A5 source</title><Linkrel= "stylesheet"type= "Text/css"href= "Css/zzsc.css"><Scripttype= "Text/javascript"class= "Library"src= "Js/jquery-1.8.2.min.js"></Script><Scripttype= "Text/javascript"class= "Library"src= "Js/jquery.colorbox-min.js"></Script><Scripttype= "Text/javascript"class= "Library"src= "Js/zzsc.js"></Script><Body><Divclass= "Con-fangda"ID= "Fangdajing"> <Divclass= "Con-fangdaimg"> <!--pictures that are displayed normally - <imgsrc= "Images/big/1.jpg"> <!--Sliding block - <Divclass= "Magnifyingbegin"></Div> <!--picture displayed by Magnifier - <Divclass= "Magnifyingshow"><imgsrc= "Images/big/1.jpg"></Div> </Div> <ulclass= "Con-fangda-imglist"> <!--Picture Display list - <Liclass= "Active"><imgsrc= "Images/thumb/1.jpg"data-bigimg= "Images/big/1.jpg"></Li> <Li><imgsrc= "Images/thumb/2.jpg"data-bigimg= "Images/big/2.jpg"></Li> <Li><imgsrc= "Images/thumb/3.jpg"data-bigimg= "Images/big/3.jpg"></Li> <Li><imgsrc= "Images/thumb/4.jpg"data-bigimg= "Images/big/4.jpg"></Li> <Li><imgsrc= "Images/thumb/5.jpg"data-bigimg= "Images/big/5.jpg"></Li> </ul></Div><Divstyle= "text-align:center;margin:50px 0; font:normal 14px/24px ' MicroSoft yahei ';"><P>Applicable browser: IE8, 360, FireFox, Chrome, Safari, Opera, Proud tour, Sogou, the window of the world.</P><P>Source:<ahref= "http://down.admin5.com/info/"Target= "_blank">A5 Source</a></P></Div></Body></HTML>
Css
*{margin:0; padding:0;}/*Main Container*/. Con-fangda{width:300px; Height:auto; margin:10px Auto; Background-color: #fff;}/*Normal Container*/. Con-fangdaimg{width:300px; height:450px; position:relative; Background-color: #454545;}. Con-fangdaimg >img{Width:100%; Height:100%}/*Sliding block*/. magnifyingbegin{width:150px; height:175px; Left:0; Top:0; Background-color: #454545; Opacity:0.5; Filter:alpha (Opacity=50); Position:absolute; Cursor:move; Display:none;}/*Magnifier Display Area*/. magnifyingshow{width:450px; height:514px; Display:none; Position:absolute; Right:-470px; Top:0; Overflow:hidden; Background-color: #454545;}. Magnifyingshow>img{width:900px; height:1350px; Margin-left:0; Margin-top:0;}/*Set selection picture container*/. Con-fangda-imglist{margin-top:10px; height:54px; width:320px; List-Style:none;}. Con-fangda-imglist >li{margin-right:7px; width:50px; height:50px; float: Left; Cursor:pointer; border:2px Solid #666; Background-color: #454545; Text-Align:center;}. Con-fangda-imglist > li >img{Vertical-Align:top; Display:inline; Width:auto; height:50px;}. Con-fangda-imglist >. active{Border-color: #000;}
Js
$(function() {$.fn.magnifying=function(){ varthat = $ ( This), $imgCon= That.find ('. con-fangdaimg '),//Normal picture Container$IMG = $imgCon. Find (' Img '),//normal picture, and enlarged picture collection$Drag = That.find ('. Magnifyingbegin '),//Drag the slide container$show = That.find ('. Magnifyingshow '),//Magnifier Display Area$showIMg = $show. Find (' img '),//magnifying glass picture$ImgList = That.find ('. con-fangda-imglist > Li >img '), multiple= $show. Width ()/$Drag. width ();$imgCon. MouseMove (function(e) {$Drag. css (' Display ', ' block '); $show. CSS (' Display ', ' block '); //two ways to get coordinates //var IX = e.clientx-this.offsetleft-$Drag. Width ()/2, //IY = e.clienty-this.offsettop-$Drag. Height ()/2, varIX = E.pagex-$ ( This). Offset (). left-$Drag. Width ()/2, IY = E.pagey-$ ( This). Offset (). top-$Drag. Height ()/2, MaxX = $imgCon. Width ()-$Drag. Width (), Maxy= $imgCon. Height ()-$Drag. Height (); /*This part can be used instead of the following section to determine the maximum minimum value var DX = IX < MaxX? IX > 0? ix:0: MaxX, DY = IY < Ma Xy? IY > 0? iy:0: Maxy; $Drag. css ({left:dx+ ' px ', top:dy+ ' px '}); $showIMg. css ({marginleft:-3*dx+ ' px ', margintop:-3*dy+ ' px '});*/IX= IX > 0? ix:0; IX= IX < MaxX?Ix:maxx; IY= IY > 0? iy:0; IY= IY < Maxy?Iy:maxy; $Drag. css ({left:ix+ ' px ', top:iy+ ' px '}); $showIMg. css ({marginleft:-multiple*ix+ ' px ', margintop:-multiple*iy+ ' px '}); //return false; }); $imgCon. Mouseout (function() {$Drag. css (' Display ', ' none '); $show. CSS (' Display ', ' none '); }); $ImgList. Click (function(){ varNOWSRC = $ ( This). Data (' bigimg '); $Img. attr (' SRC ', NOWSRC); $( This). Parent (). addclass (' active '). Siblings (). Removeclass (' active '); }); } $("#fangdajing"). magnifying ();});
Before I saw the use of canvas to achieve a similar magnifying glass effect, after two days to take time I will tidy up to share;
Source: A5 Source code
jquery Magnifier Effect
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
