放大镜js实现效果

Posted 2020-09-05 蔡秀芳

　　今天我想写一个放大镜因为毕竟在做网页的时候,特别是一些电商的详情页放大镜是必不可少的.什么都不说了上代码

1,html代码

1 <div id=\'small\'><img src="2.jpg" alt="" width=\'100%\'><div id=\'move\'></div></div>
2     <ul id="images">
3         <li><img class="imgs" src="2.jpg" alt="" width="100%"></li>
4         <li><img class="imgs" src="3.jpg" alt="" width="100%"></li>
5         <li><img class="imgs" src="4.jpg" alt="" width="100%"></li>
6         
7     </ul>
8     <div id=\'big\'><img src="2.jpg" alt="" id=\'img\'></div>

2,css代码

1 <style>
2 *{margin:0;padding:0;list-style: none; }
3 #small{width:400px;height:400px;border:1px solid black;position: absolute;left:50px;top:50px;}
4 #move{width:100px;height:100px;position:absolute;left:0;top:0;background: url(bg.png);display: none;}
5 #images{position:absolute;top:460px;left:60px;width:1000px;height:100px;}
6 #images li {  width: 80px; height: 80px; float: left; margin-right: 10px; border: solid 1px #333;padding: 4px;}
7 #big{width:400px;height:400px;border:1px solid black;position:absolute;left:500px;top:50px;overflow:hidden;display:none;}
8 #big #img{position: absolute;left:-100px;}
9 </style>

3,js代码

 1     <script>
 2          var small = document.getElementById(\'small\');
 3          var big = document.getElementById(\'big\');
 4          var move = document.getElementById(\'move\');
 5          var img = document.getElementById(\'img\')
 6         
 7          //1 图片替换
 8          var list = images.children;
 9          // console.log(list);
10          for(var i=0;i<list.length;i++){
11              list[i].onclick = function (){
12                  var src = this.firstElementChild.src;
13                  //小图大图的图片资源都要替换
14                  small.firstElementChild.src = src;
15                  big.firstElementChild.src = src;
16              }
17          }
18          //2 鼠标移动 
19          small.onmousemove = function(ent){
20              //大盒子显示 放大镜显示
21              big.style.display = "block";
22              move.style.display = "block";
23 
24              //获得鼠标
25              var ent  = ent || window.event;
26 
27              //放大镜不能出盒子范围 
28              var minX = 0;
29              var maxX = small.offsetWidth-move.offsetWidth;
30              var minY = 0;
31              var maxY = small.offsetHeight-move.offsetHeight;
32 
33              if(ent.clientX-move.offsetWidth<minX){//e.pageX
34                  move.style.left ="0px";
35              }else if(ent.clientX-move.offsetWidth>maxX){//e.pageX
36                  move.style.left =maxX+"px";
37              }else{
38                  move.style.left = (ent.clientX-move.offsetWidth)+"px";//e.pageX
39              }
40 
41              if(ent.clientY-move.offsetHeight<minY){//e.pageY
42                  move.style.top ="0px";
43              }else if(ent.clientY-move.offsetHeight>maxY){//e.pageY
44                  move.style.top =maxY+"px";
45              }else{
46                  move.style.top = (ent.clientY-move.offsetHeight)+"px";//e.pageY
47              }
48 
49 
50              //大盒子随鼠标的移动位置
51              big.scrollTop = (ent.clientY-small.offsetTop)*2.5-200;//e.pageY
52              big.scrollLeft = (ent.clientX-small.offsetLeft)*2.5-250;//e.pageX
53 
54             //放大镜的位置 (会出盒子范围)
55             // move.style.left = (ent.clientX-move.offsetWidth)+"px";
56              // move.style.top = (ent.clientY-move.offsetHeight)+"px";
57 
58              //添加鼠标样式
59              small.style.cursor = "move";
60 
61          }
62          //3 鼠标移出
63          small.onmouseout = function(){
64              //大盒子\\放大镜消失
65              big.style.display = "none";
66              move.style.display = "none";
67              //恢复默认样式
68              small.style.cursor = "default";
69          }
70     </script>

原理:

只要我们算放大镜的位置,其实放大镜并不难 在这里要特别注意一点,e.clientX/clientY和e.pageX/pageY两者之间的区别,不然在做放大镜的时候会出现bug.

好了今天放大镜写到这里明天我们写jQuery放大镜.