放大镜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:0;padding:0;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:0;top:0;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放大镜.