放大镜

发布于 2020-04-19  718 次阅读


思路:

布局,左边一张小的图片,右边一张大的图片,按照等比例放大
所谓放大就是右边有一张比左边更大的图片,鼠标划上遮罩层,右边显示放大图片
通过鼠标事件实现其功能

htmlcssjs
        <div id = 'small'>
            <img src="http://jiuaibuni.top/h5/img/timg.jpeg" alt=""/>
            <div id = 'mark'></div>
        </div>
        <div id = 'big'>
            <img src="http://jiuaibuni.top/h5/img/timg.jpeg" alt=""/>
        </div>
        /* 左边 */
        #small{
            width: 300px; 
            height: 560px; 
            position: absolute; 
            left: 100px; 
            top: 100px;
            }
        #small img{
            width: 100%; 
            height: 100%;
            }
        /* Mark遮罩层样式 
            刚开始遮罩层是隐藏的
        */
        #mark{
            display: none;
            width: 200px; 
            height: 200px;  
            background-color: white; 
            opacity: 0.5; 
            filter: alpha(opacity=50); 
            position: absolute; 
            left: 0px; 
            top: 0px;
            }
        /* 
                右边区域
                初始隐藏
            */
        #big{
            display: none;
            width: 400px; 
            height: 400px; 
            border: 1px solid black; 
            left: 500px; 
            top: 100px; 
            position: absolute; 
            overflow: hidden;
            }
        #big img{
            width: 600px; 
            height: 1120px; 
            position: absolute; 
            left: 0px; 
            top: 0px;
            }
        window.onload = function(){
            var oSmall = document.getElementById("small");
            var oBig = document.getElementById("big");
            // 遮罩层
            var oMark = document.getElementById("mark");
            // 获取右面的img,通过下标0把图片取出来
            var oBigImg = oBig.getElementsByTagName("img")[0];
                
            // 遮罩层鼠标移入显示
            oSmall.onmouseover = function(){
                oMark.style.display = 'block';
                oBig.style.display = 'block';
            }
            // 遮罩层鼠标移出隐藏
            oSmall.onmouseout = function(){
                oMark.style.display = 'none';
                oBig.style.display = "none";
            }
            //  跟着鼠标移动
            oSmall.onmousemove = function(ev){
                // 拿到事件对象 
                // 兼容事件对象
                var e = ev || window.event;

                // clientX距离视窗的距离
                // 鼠标箭头在遮罩层中居中
                // left值和top值
                var l = e.clientX - oSmall.offsetLeft - 100;
                var t = e.clientY - oSmall.offsetTop - 100;
            // 设极值限制遮罩层出界
                if(l <= 0){ l = 0; } if(l >= 100){
                    l = 100;
                }
                if(t <= 0){ t = 0; } if(t >= 360){
                    t = 360;
                }
                // 获取鼠标的坐标
                oMark.style.left = l + 'px';
                oMark.style.top = t + 'px';
                // 右边图片的移动方式,左边遮罩层如何移动,右边图片,
                // 放大两倍,反方向(是乘负数)对应倍数移动
                oBigImg.style.left = l * -2 + 'px';
                oBigImg.style.top = t * -2 + 'px';
            }
        }

一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。