电商网站常用功能---放大镜

是电商网站预览商品时常使用的模块
涉及功能:图片预览、图片切换、盒子定位
图片素材后附
放大预览
代码示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            #s_box{
                width:380px ;
                height: 380px;
            }
            #mask{
                display: block;
                width: 200px;
                height: 200px;
                background: rgba(250,250,0,0.4);
                position: absolute;
                top: 0px;
                left: 0px;
                display: none;
                /*鼠标移动到上边出现十字指针*/
                cursor: move;
            }
            #b_box{
                width: 450px;
                height: 550px;
                border: solid 1px black;
                overflow: hidden;
                position: absolute;
                left: 380px;
                top: 0px;
            }
            #b_box img{
                position: relative;
            }
            #ul{
                height: 60px;
                width: 380px;
                clear: both;
            }
            #ul li{
                float: left;
                margin-right: 20px;
            }
            #ul li:hover{
                border: solid 3px red;
                border-radius: 3px;
            }
            
        </style>
    </head>
    <!--页面布局      子绝父相-->
    <body>
        <div id="box">
            <div id="s_box">
                <img src="img/1.png"/>
                <span id="mask">
                </span>
            </div>
            <div id="b_box">
                <img src="img/01.png"/>
            </div>
            <div id="ul">
                <ul>
                    <li><img src="img/1.jpg"/></li>
                    <li><img src="img/2.jpg"/></li>
                    <li><img src="img/3.jpg"/></li>
                    <li><img src="img/4.jpg"/></li>
                    <li><img src="img/5.jpg"/></li>
                </ul>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            //获取到想对应的元素对象
            var box = document.getElementById("box")
            var s_box = document.getElementById("s_box");
            var b_box = document.getElementById("b_box");
            var mask = document.getElementById("mask");
            var b_img = b_box.getElementsByTagName("img")[0];
            var ul = box.getElementsByTagName("ul")[0];
            var imgs = ul.getElementsByTagName("img")
            //给每一个li里面的图片添加事件,改变盒子的图片
            for (var i = 0; i < imgs.length; i++) {
                //闭包
                (function(i){
                    imgs[i].onmouseover = function(){
                        //改变盒子图片的路径
                        s_box.getElementsByTagName("img")[0].src = "img/"+ (i+1)+".png";
                        b_img.src = "img/0"+ (i+1)+".png";
                    }
                })(i);
            }
            //当鼠标移入s_box盒子时,mask显示出来,并根据鼠标移动
            s_box.onmouseover = function(ev){
                mask.style.display = "block";
                moveMask(ev);
                mask.onmousemove = function(ev){
                    moveMask(ev);   
                }
            }
            //鼠标移出s_box时,把mask隐藏起来
            s_box.onmouseout = function(ev){
                mask.style.display = "none";        
            }
            
            //具体的mask移动策略
            function moveMask(ev){
                //大盒子的宽高与小盒子的比值
                 var numX = b_box.offsetWidth/s_box.offsetWidth
                 var numY = b_box.offsetHeight/s_box.offsetHeight;
                if(ev.pageX > s_box.offsetLeft + s_box.offsetWidth - mask.offsetWidth/2){
                    //右边界条件
                    mask.style.left = s_box.offsetWidth - mask.offsetWidth + "px"
                }else if(ev.pageX < s_box.offsetLeft+mask.offsetWidth/2){
                    //左边界条件
                    mask.style.left = 0 + "px";
                }else{
                    //中间区域的移动策略
                    mask.style.left = ev.pageX - s_box.offsetLeft - mask.offsetWidth/2 + "px";
                    b_img.style.left = -(ev.pageX - s_box.offsetLeft - mask.offsetWidth/2)*numX  + "px";
                }
                
                if(ev.pageY > s_box.offsetTop + s_box.offsetHeight-mask.offsetHeight/2){
                    //下边界条件
                    mask.style.top = s_box.offsetHeight - mask.offsetHeight + "px";
                }else if(ev.pageY < s_box.offsetTop + mask.offsetHeight/2){
                    //上边界条件
                    mask.style.top = 0 + "px";
                }else{
                    //中间区域移动策略
                    mask.style.top = ev.pageY - s_box.offsetTop - mask.offsetHeight/2 + "px";   
                    b_img.style.top = -(ev.pageY - s_box.offsetTop - mask.offsetHeight/2)*numY + "px";
                }
        }
        }
    </script>
</html>