JS_模拟电商网站放大镜效果

很多电商网站，都有图片，鼠标移入图片会出现一个大图，随着鼠标的移动，大图的位置也会跟着移动

下面贴上代码

html:

1 <div class="enlageTool">
2         <div class="normalImg" id="normalImg">
3             <div class="enlageGlass" id="enlageGlass"></div>
4         </div>
5         <div class="enlageImg" id="enlageImg"></div>    
6     </div>

html代码

css:

 1 *{
 2     margin:0;
 3     padding: 0;
 4     box-sizing: border-box;
 5 }
 6 .enlageTool{
 7     position: relative;
 8     margin:100px;
 9 }
10 .normalImg{
11     background: url('../images/notebook.jpeg') no-repeat;
12     width: 350px;
13     height: 350px;
14     border: 1px solid #000;
15 }
16 .enlageImg{
17     background: url('../images/notebook-big.jpeg') no-repeat left top;
18     width: 400px;
19     height: 400px;
20     border: 1px solid #000;
21     position: absolute;
22     top: 0;
23     left: 350px;
24     display: none;
25 }
26 .enlageGlass{
27     background: #fede4f;
28     width: 175px;
29     height: 175px;
30     opacity: 0.5;
31     cursor: move;
32     position: absolute;
33     top: 0;
34     left: 0;
35     display: none;
36 }

css代码

common.js

 1 var objAnim = function(){
 2 
 3     this.zoomMove =function(normalImg,enlageGlass,enlageImg,event){
 4         var e = event || window.event;
 5         var scrollPosX = window.pageXOffset || document.documentElement.scrollLeft;
 6         var scrollPosY = window.pageYOffset || document.documentElement.scrollTop;
 7         var times = enlageImg.offsetWidth/normalImg.offsetWidth;
 8 
 9         var desX = e.clientX - normalImg.parentNode.offsetLeft + scrollPosX - enlageGlass.offsetWidth/2;
10         var desY = e.clientY - normalImg.parentNode.offsetTop + scrollPosY - enlageGlass.offsetHeight/2
11         
12         if(desX<0){
13             desX = 0;
14         }
15         else if(desX > normalImg.offsetWidth - enlageGlass.offsetWidth){
16             desX = normalImg.offsetWidth - enlageGlass.offsetWidth;
17         }
18 
19         if(desY < 0){
20             desY = 0;
21         }
22         else if(desY > normalImg.offsetHeight - enlageGlass.offsetHeight){
23             desY = normalImg.offsetHeight - enlageGlass.offsetHeight;
24         }
25 
26         enlageGlass.style.left = desX + "px";
27         enlageGlass.style.top = desY +"px";
28 
29         enlageImg.style.backgroundPosition = -desX*times + "px "+(-desY*times) +"px";
30 
31     }
32 
33     this.zoomIn = function(enlageGlass,enlageImg){
34         enlageImg.style.display = "block";
35         enlageGlass.style.display = "block";
36     }
37 
38     this.zoomOut = function(enlageGlass,enlageImg){
39         enlageImg.style.display = "none";
40         enlageGlass.style.display = "none";
41     }
42 
43 }

function.js

 1 window.addEventListener("load",loadPage)
 2 
 3 function loadPage(){
 4     var enlageGlass = document.getElementById("enlageGlass");
 5     var normalImg = document.getElementById("normalImg");
 6     var enlageImg = document.getElementById("enlageImg");
 7 
 8     var zoom = new objAnim();
 9 
10     normalImg.addEventListener("mousemove",function(event){
11         zoom.zoomMove(normalImg,enlageGlass,enlageImg,event);
12     })
13 
14     normalImg.addEventListener("mouseover",function(){
15         zoom.zoomIn(enlageGlass,enlageImg);
16     })
17 
18     normalImg.addEventListener("mouseout",function(){
19         zoom.zoomOut(enlageGlass,enlageImg);
20     })
21 }

由于图片的限制原因，就不做效果展示了。

下面po一张效果截图供参考：

以上内容，如有错误请指出，不甚感激。