淘宝京东放大图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 100px;
            position: relative;
        }
        .big{
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            /*display: none;*/
            position: absolute;
            top: 0;
            left: 410px;
            overflow: hidden;
        }
        .small>img{
            width: 400px;
            height: 400px;
        }
        #fang{
            width: 200px;
            height: 200px;
            background: black;
            opacity: 0.1;
            position: absolute;
            top: 0;
            left: 0;
            /*display: none;*/
            cursor: move;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="samll">
        <img src="image/da1.jpg" alt="">
        <div id="fang"></div>
    </div>
    <div class="big">
        <img src="image/da2.jpg" alt="">
    </div>
</div>
<script>
    //实现效果：
    //鼠标放到小图片上面的时候，后面的大盒子出现。鼠标离开的时候大盒子隐藏。
    //鼠标移动的时候，大盒子内的大图片也移动。
    var small = document.getElementsByClassName('samll')[0];
    var oimg = document.getElementsByClassName('samll')[0].getElementsByTagName("img")[0];
    var big = document.getElementsByClassName('big')[0];
    var mask = document.getElementById('fang');
    var box = document.getElementsByClassName('box')[0];
    var img = big.children[0];
    // small.onmouseover = function () {
    //     big.style.display = 'block';//鼠标放上的时候，大盒子出现;
    //     mask.style.display = 'block';//与鼠标同步的放大镜也同时出现;
    // }
    // small.onmouseout = function () {//鼠标离开的时候，与上面的效果反之。
    //     big.style.display = 'none';
    //     mask.style.display = 'none';
    // }
    small.onmousemove = function (ev) {
        //如果mask的到父元素左边的值大于 其父元素的宽度减去放大镜的宽度。就都等于父元素的宽度-mask的宽度。
        //放大镜的横坐标的值 等于当前鼠标的横坐标值减去box到其父元素左边（即浏览器）减去放大镜宽度的一半，
        //鼠标始终保持在放大镜的中央。
        var even=ev||window.event;
        var le=even.clientX-box.offsetLeft;
        var to=even.clientY-box.offsetTop;
        mask.style.left =le-mask.offsetWidth/2+'px';
        mask.style.top = to-mask.offsetHeight/2+'px';
        // img.style.left = 500+'px';
        //防止放大镜溢出 小图片盒子
        //放大镜到父元素的左边的距离 如果大于 小图片的宽度 减去放大镜的宽度 即表示放大镜溢出
        // 则令其等于 小图片的宽度 减去放大镜的宽度
        if(mask.offsetLeft>oimg.offsetWidth-mask.offsetWidth){
            mask.style.left = (oimg.offsetWidth-mask.offsetWidth)+'px';
            //放大镜的Left的值如果为负，就为零
        }else if(mask.offsetLeft<=0){
            mask.style.left = 0+'px';
            //纵坐标 同理
        }if(mask.offsetTop>oimg.offsetHeight-mask.offsetHeight){
            mask.style.top = (oimg.offsetHeight-mask.offsetHeight)+'px';
        }else if(mask.offsetTop<=0){
            mask.style.top = 0+'px';
        }
        //移动时 大图片移动的距离 应是 鼠标移动距离 放大镜到父元素的距离乘以大图片宽高除以小图片宽高
        var numX = big.offsetWidth/box.offsetWidth;
        var numY = big.offsetHeight/box.offsetHeight;
//            alert(beinum);
        img.style.transform = "translateX("+-mask.offsetLeft*numX+"px"+")"
            +"translateY("+-mask.offsetTop*numY+"px"+")";
    }

</script>
</body>
</html>
猜你喜欢
