文章标题

最新推荐文章于 2023-10-19 15:03:50 发布

R_March

最新推荐文章于 2023-10-19 15:03:50 发布

阅读量210

点赞数

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

本文链接：https://blog.csdn.net/cainiao_xiao_bai/article/details/77871503

版权

js之放大镜专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>放大镜2</title>
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" href="../css/放大镜2.css" />
        <script type="text/javascript" src="../js/basics.js"></script>
        <script type="text/javascript" src="../js/放大镜2.js"></script>    
    </head>
    <body>
        <div id="box">
            <div id="smallImg">
                <img src="../img/1_2.jpeg"/>
                <div class="move-area"></div>
            </div>
            <div id="smallImg-logo">
                <ul class="clear">
                    <li>
                        <img src="../img/1_1.jpeg" data-sImg="../img/1_2.jpeg" data-bImg="../img/1_3.jpeg"/>
                    </li>
                    <li>
                        <img src="../img/2_1.jpeg" data-sImg="../img/2_2.jpeg" data-bImg="../img/2_3.jpeg"/>
                    </li>
                    <li>
                        <img src="../img/3_1.jpeg" data-sImg="../img/3_2.jpeg" data-bImg="../img/3_3.jpeg"/>
                    </li>
                    <li>
                        <img src="../img/4_1.jpeg" data-sImg="../img/4_2.jpeg" data-bImg="../img/4_3.jpeg"/>
                    </li>
                    <li>
                        <img src="../img/5_1.jpeg" data-sImg="../img/5_2.jpeg" data-bImg="../img/5_3.jpeg"/>
                    </li>

                </ul>
            </div>
            <div id="bigImg">
                <img src="../img/1_3.jpeg" />
            </div>
        </div>
    </body>
</html>

css部分

#box{
    height: 480px;
    width: 380px;
    border: solid 1px #CCCCCC;
    position: relative;
    margin: 20px 0 0 20px;
}
#box #smallImg{
    margin:10px;
    width: 358px;
    height: 358px;
    border: solid 1px #CCCCCC;
    position: relative;
}

#box .move-area{
    background:plum;
    opacity: 0.3;
    filter: alpha(opacity = 30);
    width: 100px;
    height: 100px;
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
}
#box #smallImg img{
    width: 358px;
    height: 358px;
}
#box #smallImg-logo{
    padding-left: 30px;
}
#box #smallImg-logo ul li{
    float: left;
    height: 54px;
    width: 54px;
    border: solid 1px #CCCCCC;
    margin-right: 10px;
}

#box #smallImg-logo ul li img{
    height: 54px;
    width: 54px;
}

#box #bigImg{
    position: absolute;
    top: 0;
    right: -550px;
    height: 500px;
    width: 500px;
    border: solid 1px #CCCCCC;
    overflow: hidden;
    /*display: none;*/
}
#box #bigImg img{
    position: absolute;
    top: 0;
    left: 0;
}

js部分

/*
 * 1、分为三个部分小图、大图、图标
 * 2、给小图添加自定义的属性用于保存，小图和大图中的图片来源
 * 3、给小图标添加鼠标移入事件，当鼠标移入转换对应的小图和大图
 * 4、给小图添加移入事件，显示区域框和大图对应区域框的位置（区域框相对于器包含块定位，改变它的left和top值）
 *  区域框的left值 = 鼠标事件发生位置pageX - 最外层包含块的offsetLeft的值 - 其直接包含框的offset的值 -区域框宽度的一般，值同理
 * 5、大图的图片设置相对于其包含块相对定位，它移动的距离为 -（大图的宽度/小图的宽度)*x,运动方向个区域框的方法相反，所以取负
 * 6、区域框的大小设置：小图/大图*40;
 * 
 * 注意事项：
 * 1、自己生成的移动狂的大小要取整数
 * 2、当鼠标移动框的距离大于包含框的宽度- 移动狂的宽度时，让 移动框的lef值= 包含块的宽度（offsetWidth）- 移动狂的宽度，高度同理
 * 有时候可能会收到边框的影响则x/y的值再减去边框长度(或者使用clientWidth则不需要减去边框长度)
 */

window.onload = function(){
    var smallImgLogo = $('smallImg-logo');
    var lis1 = smallImgLogo.getElementsByTagName('li');
    var smallImgPic = $('smallImg').getElementsByTagName('img')[0];
    var bigImgPic = $('bigImg').getElementsByTagName('img')[0];


    for(var i = 0;i < lis1.length;i++){
        lis1[i].index = i;
        lis1[i].onmouseover = function(){
            this.style.borderColor = 'black';
            smallImgPic.src = lis1[this.index].children[0].getAttribute('data-sImg');
            bigImgPic.src = lis1[this.index].children[0].getAttribute('data-bImg');
        };
        lis1[i].onmouseout = function(){
            this.style.borderColor = '#ccc';
        };
    }

    var moveArea = document.getElementsByClassName('move-area')[0];
    var scale = (bigImgPic.offsetWidth)/(smallImgPic.offsetWidth);

    moveArea.style.width = parseInt(1/scale*300)+'px';
    moveArea.style.height = parseInt(1/scale*300)+'px';

    var smallImg = $('smallImg');
    var bigImg = $('bigImg');
    var box = $('box');
    smallImg.onmousemove = function(evt){
        var e = evt || window.event;

        moveArea.style.display = 'block';
        bigImg.style.display = 'block';

        var x = e.pageX - box.offsetLeft - smallImg.offsetLeft - parseInt(moveArea.offsetWidth/2);
        var y = e.pageY - box.offsetTop - smallImg.offsetTop - parseInt(moveArea.offsetHeight/2);

        if(x < 0){
            x = 0;
        }else if(x > (smallImg.clientWidth - moveArea.offsetWidth)){
            x = smallImg.clientWidth - moveArea.offsetWidth;  
        }

        if(y < 0){
            y = 0;
        }else if(y > (smallImg.clientHeight - moveArea.offsetHeight)){
            y = smallImg.clientHeight - moveArea.offsetHeight;
        }
//      console.log(x);
        moveArea.style.left = x + 'px';
        moveArea.style.top = y + 'px';

        bigImgPic.style.left = -scale*x + 'px';
        bigImgPic.style.top = -scale*y + 'px';

    }

    smallImg.onmouseout = function(){
        moveArea.style.display = 'none';
        bigImg.style.display = 'none';
    }

};