文章标题

小咪咪 2022-06-09 13:39 78阅读 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';
        }
    
    };

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220609/9b190d885f2c4b7ca70b115f6ab9fce6.png