We usually when electricity supplier shopping site, you need to select a certain commodity details view, will appear next to amplify the effect of one part of the picture during this time when the mouse to move a certain part of the picture viewed on a commodity, so it can be better the analysis of commodities, following on the use of native js to achieve a similar look magnifying glass effect.
Analysis of ideas:
NOTE: size enlargement scale = left box / boxes inside the shear size, the scale value display content as the right size of the box
Code is as follows :
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>原生js实现图片放大镜</title> 8 <link rel="stylesheet" href="./css/style.css"> 9 </head> 10 11 <body> 12 13 <div id="wrap"> 14 <div class="pic"> 15 <img src="./images/1.jpg" alt=""> 16 <div class="zoom"></div> 17 </div> 18 <ul class="list"> 19 <li class="current"> 20 <img src="./images/1.jpg" alt=""> 21 </li> 22 <li> 23 <img src="./images/2.jpg" alt=""> 24 </li> 25 <li> 26 <img src="./images/3.jpg" alt=""> 27 </ <28> > 29 <img src="./images/4.jpg" alt=""> 30 </li> 31 <li> 32 <img src="./images/5.jpg" alt=""> 33 </li> 34 <li> 35 <img src="./images/6.jpg" alt=""> 36 </li> 37 </ul> 38 <div class="details"></div> 39 40 41 <script src="./js/index.js"></script> 42 </body> 43 </html>
@charset "utf-8"; * { margin: 0; padding: 0; } li{ list-style: none; } body { background-color: #eee; } #wrap { position: relative; width: 400px; height: 480px; margin: 50px auto; border: 1px solid #888; } #wrap .pic img { width: 400px; height: 400px; } #wrap .pic .zoom { position: absolute; top: 0; left: 0; width: 150px; height: 150px; background-color: lightblue; opacity: .4; cursor: move; } #wrap .list { display: flex; margin-top: 10px; justify-content: space-around; } #wrap .list li{ cursor: pointer; } #wrap .list .current{ border: 2px solid red; } #wrap .list img { width: 50px; height: 50px; vertical-align: bottom; /*Bottom blank solution image, change the alignment, the default baseline alignment * / } #wrap .details { position : Absolute ; / * the display: none; * / Top : 0 ; left : 400px ; width : 400px ; height : 400px ; margin -left : 20px ; border : 1px Solid # 888 ; background-Image : URL ( '/ Images / 1.jpg') ; background-size : 266% ; }
1 var list = document.querySelector(' .list '), 2 img = document.querySelector(' .pic img '), 3 li_list = list.querySelectorAll(' li '), 4 pic = document.querySelector(' #wrap .pic '), 5 zoom = document.querySelector(' .zoom '), 6 details = document.querySelector(' .details ') 7 8 list.addEventListener('click', function (e) { 9 e = e || window.event 10 // console.log(e.target) 11 if(e.target.tagName == 'the IMG' ) { 12 is img.src = e.target.src; 13 is details.style.backgroundImage = 'URL (' + + e.target.src ')' ; 14 // Console .log (e.target.parentNode) 15 li_list.forEach ( function (Item) { 16 the console.log (Item) . 17 item.className = ''; // every six traversing element and li class name Clear 18 }) . 19 e.target.parentNode.className = 'Current'; // find e.target by adding the parent element and the class name 20 is // the console.log (li_list) 21 is } 22 is }, to false ) 23 is 24 pic.addEventListener ( 'mouseMove', function (E) { 25 E = E || the window.event 26 is var X = e.clientX, 27 Y = e.clientY; 28 CX = pic.getBoundingClientRect () .left; // getBoundingClientRect () Gets an element with respect to the set of windows 29 CY = pic.getBoundingClientRect () Top;. 30 TX = X - CX - 75 ; 31 is TY = Y - CY - 75 32 / / the console.log (E) 33 is //the console.log (X, Y) 34 is // the console.log (CX, CY) 35 36 // for limiting movement range .zoom cassette 37 [ IF (TX <0 ) { 38 is TX = 0 ; 39 } 40 IF (TX > 250 ) { 41 is TX 250 = 42 is } 43 is IF (TY <0 ) { 44 is TY = 0 ; 45 } 46 is IF (TY> 250 ) { 47 TY 250 = 48 } 49 50 details.style.backgroundPosition = (tx / 250 * 100 + '%') + (ty / 250 * 100 + '%') 51 52 zoom.style.left = tx + 'px' 53 zoom.style.top = ty + 'px'; 54 })
The net effect :
to sum up:
To achieve the overall effect of static, then code the logic step by step according to the needs, in order to achieve the overall effect