放大镜js实现效果

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

1,html代码

 <div id='small'><img src="2.jpg" alt="" width='100%'><div id='move'></div></div>

     <ul id="images">

         <li><img class="imgs" src="2.jpg" alt="" width="100%"></li>

         <li><img class="imgs" src="3.jpg" alt="" width="100%"></li>

         <li><img class="imgs" src="4.jpg" alt="" width="100%"></li>

     </ul>

     <div id='big'><img src="2.jpg" alt="" id='img'></div>

2,css代码

 <style>

 *{margin:;padding:;list-style: none; }

 #small{width:400px;height:400px;border:1px solid black;position: absolute;left:50px;top:50px;}

 #move{width:100px;height:100px;position:absolute;left:;top:;background: url(bg.png);display: none;}

 #images{position:absolute;top:460px;left:60px;width:1000px;height:100px;}

 #images li {  width: 80px; height: 80px; float: left; margin-right: 10px; border: solid 1px #333;padding: 4px;}

 #big{width:400px;height:400px;border:1px solid black;position:absolute;left:500px;top:50px;overflow:hidden;display:none;}

 #big #img{position: absolute;left:-100px;}

 </style>

3,js代码

     <script>

          var small = document.getElementById('small');

          var big = document.getElementById('big');

          var move = document.getElementById('move');

          var img = document.getElementById('img')

          //1 图片替换

          var list = images.children;

          // console.log(list);

          for(var i=0;i<list.length;i++){

              list[i].onclick = function (){

                  var src = this.firstElementChild.src;

                  //小图大图的图片资源都要替换

                  small.firstElementChild.src = src;

                  big.firstElementChild.src = src;

              }

          }

          //2 鼠标移动

          small.onmousemove = function(ent){

              //大盒子显示 放大镜显示

              big.style.display = "block";

              move.style.display = "block";

              //获得鼠标

              var ent  = ent || window.event;

              //放大镜不能出盒子范围

              var minX = 0;

              var maxX = small.offsetWidth-move.offsetWidth;

              var minY = 0;

              var maxY = small.offsetHeight-move.offsetHeight;

              if(ent.clientX-move.offsetWidth<minX){//e.pageX

                  move.style.left ="0px";

              }else if(ent.clientX-move.offsetWidth>maxX){//e.pageX

                  move.style.left =maxX+"px";

              }else{

                  move.style.left = (ent.clientX-move.offsetWidth)+"px";//e.pageX

              }

              if(ent.clientY-move.offsetHeight<minY){//e.pageY

                  move.style.top ="0px";

              }else if(ent.clientY-move.offsetHeight>maxY){//e.pageY

                  move.style.top =maxY+"px";

              }else{

                  move.style.top = (ent.clientY-move.offsetHeight)+"px";//e.pageY

              }

              //大盒子随鼠标的移动位置

              big.scrollTop = (ent.clientY-small.offsetTop)*2.5-200;//e.pageY

              big.scrollLeft = (ent.clientX-small.offsetLeft)*2.5-250;//e.pageX

             //放大镜的位置 (会出盒子范围)

             // move.style.left = (ent.clientX-move.offsetWidth)+"px";

              // move.style.top = (ent.clientY-move.offsetHeight)+"px";

              //添加鼠标样式

              small.style.cursor = "move";

          }

          //3 鼠标移出

          small.onmouseout = function(){

              //大盒子\放大镜消失

              big.style.display = "none";

              move.style.display = "none";

              //恢复默认样式

              small.style.cursor = "default";

          }

     </script>

原理:

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

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

巴特西

放大镜js实现效果

最新文章

热门文章