放大镜(商品浏览)

最新推荐文章于 2019-08-06 18:48:55 发布

不仅是记忆

最新推荐文章于 2019-08-06 18:48:55 发布

阅读量344

点赞数

分类专栏： js 文章标签： js放大镜

本文链接：https://blog.csdn.net/a916123063/article/details/51769286

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一般大家在浏览商城的时候都会有放大镜,下面是一个简单的样例分享给大家

图例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style type="text/css">
        *{margin:0px;padding:0px;list-style:none;}
        #small{width:400px;height:400px;position:absolute;left:200px;top:20px;overflow:hidden;}
        #big{width:400px;height:400px;position:absolute;left:650px;top:20px;overflow:hidden;display:none;}
        #move{width:100px;height:100px;position:absolute;background:url(./bg.png);left:0px;top:0px;visibility:hidden/*display:none;*/}
        ul{width:300px;height:100px;position:absolute;top:450px;left:200px;}
        li{width:100px;height:100px;float:left;margin-right:10px;border:dashed 1px #444;padding:10px;}
    </style>
</head>
<body style="height:4000px;">
    <div id="small">
        <img src="Meinv014.jpg" alt="" width="100%" id="sImg">
        <div id="move"></div>
    </div>   
 
    <div id="big">
        <img src="Meinv014.jpg" alt="" style="position:absolute;" id="bImg">
    </div>
 
    <ul id="imgs">
        <li><img src="2.jpg" alt="" width="100%"></li>
        <li><img src="3.jpg" alt="" width="100%"></li>
    </ul>
    <script type="text/javascript">
    //获取元素
        var small = document.getElementById('small');
        var big = document.getElementById('big');
        var move = document.getElementById('move');
        var bImg = document.getElementById('bImg');
        var sImg = document.getElementById('sImg');
 
    //给小图div绑定鼠标移动事件
        small.onmousemove = function(e){
            //修改鼠标的样式
            small.style.cursor = "move";
            big.style.display  ="block";
            move.style.visibility = "visible";
 
            //获取鼠标的位置
            var x = e.pageX;//获取当前鼠标相对于文档的偏移量
            var y = e.pageY;
 
            //获取小div距离左侧的偏移量
            var _l = small.offsetLeft;
            var _t = small.offsetTop;
 
            //获取移动div宽度的一般
            var _w = move.offsetWidth/2;
            var _h = move.offsetHeight/2;
 
            //计算新的left值
            var newL = x-_l-_w;
            var newT = y-_t-_h;
 
            //检测越界
            if(newL <= 0){
                newL = 0;
            }
            var maxLeft = small.offsetWidth - move.offsetWidth;
            if(newL >= maxLeft){
                newL = maxLeft;
            }
 
            if(newT <= 0){
                newT = 0;
            }
            var maxTop = small.offsetHeight - move.offsetHeight;
            if(newT >= maxTop){
                newT = maxTop;
            }
 
            //设置css
            move.style.left = newL + 'px';
            move.style.top = newT + 'px';
 
            //计算移动的比例
            var sW = small.offsetWidth;
            var mL = newL;
 
            var p = mL/sW;
            //Y轴的比例
            var yP = newT/small.offsetHeight;
 
            //获取右侧大图的宽度
            var bW = bImg.offsetWidth;
            var bH = bImg.offsetHeight;
 
            //计算右侧图片移动的距离
            var nL = bW*p;
            var nT = bH*yP;
 
            //设置css样式
            bImg.style.left = -nL+'px';
            bImg.style.top = -nT + 'px';
 
            //计算移动div的宽度和高度
            var Bp = big.offsetWidth/bImg.offsetWidth;
            var sW = small.offsetWidth;
 
            var Bpp = big.offsetHeight/bImg.offsetHeight;
            var sH = small.offsetHeight;
 
            //计算新的宽度值
            var mW = sW*Bp;
            var mH = sH*Bpp;
 
            move.style.width = mW + 'px';
            move.style.height = mH + 'px';
        }
 
    //绑定鼠标离开事件
        small.onmouseout = function(){
            //visibility
            move.style.visibility = "hidden";
            big.style.display = "none";
        }
 
    //获取ul
        var ul = document.getElementById('imgs');
    //获取ul中的img
        var is = ul.getElementsByTagName('img');// document.getElementsByTagName
        for(var i=0;i<is.length;i++){
            is[i].onclick = function(){
                //获取当前点击图片的src属性
                var src = this.getAttribute('src');
                //设置src
                bImg.src = src;
                sImg.src = src;
            }
        }
 
    </script>
</body>
</html>