lovecoding
/
VIP26


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #container {
            /* overflow: auto; */
            position: relative;
        }
        #small {
            width: 400px;
            height: 400px;
            position: relative;
            /* float: left; */
        }
        #drag {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, .3);
            display: none;
            position: absolute;
            top: 0;
            left: 0;
        }
        #big {
            /* float: left; */
            position: absolute;
            top: 0;
            left: 400px;
            width: 400px;
            height: 400px;
            overflow: hidden;
            display: none;
        }
        #bigImg {
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="small">
            <img src="../image/6.jpg" alt="">
            <div id="drag"></div>
        </div>
        <div id="big">
            <img src="../image/7.jpg" alt="" id="bigImg">
        </div>
    </div>
    <script src="../js/6.放大镜.js"></script>
    <!-- 
        排版:遮罩隐藏 大盒子隐藏
        获取操作元素=> 小盒子、遮罩层、大盒子、大图片；
        鼠标移入 ：遮罩显示 大盒子显示
        鼠标移出: 遮罩隐藏 大盒子隐藏
        鼠标移动：
            1.先求出鼠标在遮罩层距离盒子的距离（鼠标是在遮罩层中心点）；
            2.遮罩层移动赋值；
            3.处理遮罩层超出距离；
            4.先处理遮罩层左侧和上侧的超出问题
            5.在求出遮罩层在小盒子所移动的最大距离
            6.在处理遮罩层右侧和下方的超出问题
            7.求比例 遮罩层元素移动距离 / 遮罩层所能移动的最大距离
            8.再求出大图可以移动的最大距离
            9.给大图设置位置：-大图可移动距离 * 移动比例 + 'px'
     -->
</body>
</html>