Home > Developer > Web Develop
Magnifying glass effects
Magnifier in the mall site will often see, as the front-end, write so a must be small case, I caught dead. If you do not have a little idea of the students, you can first learn the DOM event location, distance, width and height of various method attributes.
Then directly on the code, the various comments in the code are quite complete:
Chestnut Code Link
<!doctype html><title> magnifier </title><meta charset= "Utf-8" ><style> *{margin:0; padding:0; List-Style:none; } /*working with styles of small graphs*/#small {width:400px; height:400px; border:1px solid red; Position:absolute; left:50px; top:50px; } #small img{Width:100%; Height:100%; } #move {border:1px solid yellow; Background:yellow; Position:absolute; left:0px; top:0px; Opacity:0.3; Display:none; } /*Layer Masks*/. mask{Width:100%; Height:100%; Position:absolute; Top:0; Left:0; } /*working with larger images*/#big {width:400px; height:400px; border:1px solid red; Position:absolute; left:460px; top:50px; Display:none; /*Beyond Hidden*/Overflow:hidden; } #big img{width:1000px; height:1000px; Position:absolute; } /*Handle click-to-replace styles*/#dian {width:400px; height:100px; border:1px solid Green; Position:absolute; left:50px; top:460px; } #dian li{float: Left; padding:1px; } #dian li img{width:98px; }</style><!--1. Make a small figure--><div id= "small" > <div id= "move ></div> <!--layer Mask--<div class= "Mask" ></div></div><!--2 working with large images move into small large view-- <div id= "Big" > </div><!--3 replace picture--><ul id= "Dian" > <li></li> <li></li> <li> </li> <li></li></ul><script >varBig=document.getelementbyid (' Big '); varBigimg=document.getelementbyid (' bigimg '); varSmall=document.getelementbyid (' small '); varSmallimg=document.getelementbyid (' smallimg '); varMove=document.getelementbyid (' Move '); varDian=document.getelementbyid (' Dian '); varImgs=dian.getelementsbytagname (' img '); //width and height of small sliders://Big.offsetwidth/move=bigimg.offsetwidth/smallimg.offsetwidth//move=big/(bigimg.offsetwidth/smallimg.offsetwidth)//Console.log (big.offsetwidth/(bigimg.offsetwidth/smallimg.offsetwidth)); //mouse over small show move and big, and set the size of the moveSmall.onmouseover =function() {Big.style.display= ' Block '; Move.style.display= ' Block '; Move.style.width= big.offsetwidth/(bigimg.offsetwidth/smallimg.offsetwidth) + ' px '; Move.style.height= big.offsetheight/(bigimg.offsetheight/smallimg.offsetheight) + ' px '; }; //Mouse move out hide move and bigSmall.onmouseout =function() {Big.style.display= ' None '; Move.style.display= ' None '; }; Small.onmousemove=function(e) {
vare=e| |window.event; //1. Get the mouse position in the small and let the slider center //The first method: //Console.log (e.clientx);//e.pagex //var x=e.clientx-small.offsetleft-(MOVE.OFFSETWIDTH/2); //var y=e.clienty-small.offsettop-(MOVE.OFFSETHEIGHT/2); // //The second method: Add a layer mask because E.offsetx gets is based on the coordinates in the triggering element varx = E.OFFSETX-MOVE.OFFSETWIDTH/2;vary = E.OFFSETY-MOVE.OFFSETHEIGHT/2;//Console.log (y); //2 before moving to determine whether to exceed the 0 boundary point if(x<=0) {x= 0; } if(X>= (small.offsetwidth-move.offsetwidth)) {x= small.offsetwidth-Move.offsetwidth; } if(y<=0) {y= 0; } if(Y>= (small.offsetheight-move.offsetheight)) {y= small.offsetheight-Move.offsetheight; } //3. Let the small slider follow the mouse to movemove.style.left= x + ' px '; Move.style.top= y + ' px ';//parseint Ten //4. Let the big picture follow the small of the slider to move the distance of the 2.5 varleft =-(bigimg.offsetwidth/smallimg.offsetwidth) * x;vartop =-(bigimg.offsetheight/smallimg.offsetheight) * y;//5. Assign the moving value to a large map to locateBigimg.style.left=left + ' px '; BigImg.style.top=top + ' px '; } //point to a picture in the Dian, assign the image src to smallimg and bigimg for(vari=0;i) {Imgs[i].onclick=function(e) {vare=e| |window.event; Console.log ( This. SRC); SMALLIMG.SRC= This. Src; BIGIMG.SRC= This. Src; } } </script>
JS 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
