一个javascript放大镜

Posted 2022-12-26 webcyh

 * 原理：
     * 效果当鼠标移至一个图片上面的时候 图片上面有一个透明圆圈 相当于一个放大镜 右边显示放大后的图片效果
     * 鼠标事件：onmouseover鼠标在制定对象上面移动时候 out移出后 move
     *
     * 需要了解的知识
     * offsetLeft 相对于父级元素的偏移
     * offsetWidth 不包含margin
     *
     * 难点：
     * 根据比例进行移动 放大镜的移动方向与大图片的移动相反

html代码

<div id="demo">
        <!--小图片栏-->
        <div id="small-box">
            <!--放大镜-->
            <div id="float-box">
                
            </div>
            <div style="border-radius: 50px;height:50px;width: 50px;background: green"></div>
            <div style="border-radius: 50px;height:50px;width: 50px;background: red"></div>
            <div style="border-radius: 50px;height:50px;width: 50px;background: brown"></div>
        </div>
        <!--大图片栏-->
        <div id="big-box">
            <div id="img">
                <div style="border-radius: 250px;height:250px;width: 250px;background: green"></div>
                <div style="border-radius: 250px;height:250px;width: 250px;background: red"></div>
                <div style="border-radius: 250px;height:250px;width: 250px;background: brown"></div>
            </div>
        </div>
    </div>

css样式

#demo
            width: 600px;
            height: 600px;
            background: black;
            margin:50px auto;
            position: relative;
        
        #small-box
            width: 200px;
            height: 200px;
            background: blue;
            position: relative;    
        
        #big-box
            width: 400px;
            height: 400px;
            right:0;
            position: absolute;
            background: blue;
            border-radius: 200px;
            display: none;
            overflow: hidden;
        
        #float-box
            position: absolute;
            width:80px;
            height:80px;
            border-radius: 80px;
            background: gray;
            opacity: 0.6;
            display: none;
        
        #img
            width:1000px;
            height:1000px;
            position: absolute;
        

javascript

window.onload = function()
        //获取这些元素
        var objDemo = document.querySelector("#demo");
        var objSmallBox = document.querySelector("#small-box");
        var objBigBox = document.querySelector("#big-box");
        var floatBox = document.querySelector("#float-box");
        var objImg = document.querySelector("#img");
        //鼠标事件
        objSmallBox.onmouseover = function()
            //显示
            objBigBox.style[‘display‘] = ‘block‘;
            floatBox.style[‘display‘] = ‘block‘;
            
        
        objSmallBox.onmouseout = function()
            //隐藏
            objBigBox.style[‘display‘] = ‘none‘;
            floatBox.style[‘display‘] = ‘none‘;
        
        objSmallBox.onmousemove = function(ev)
            var event = ev||window.event;//第二个是解决IE的不兼容问题
            var left = event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-floatBox.offsetWidth/2;
            var top = event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-floatBox.offsetHeight/2;
            //应该将放大镜放在smallbox内部
            if(left<0)//最小贴近左边的框
                left = 0;
            else if(left>objSmallBox.offsetWidth-floatBox.offsetWidth)
                left = objSmallBox.offsetWidth-floatBox.offsetWidth;
            
            if(top<0)//最小贴近左边的框
                top = 0;
            else if(top>objSmallBox.offsetHeight-floatBox.offsetHeight)
                top = objSmallBox.offsetHeight-floatBox.offsetHeight;
            
            //console.log(left+"-"+top);
            floatBox.style[‘left‘] = left+"px";
            floatBox.style[‘top‘] = top+"px";

            //计算当前的比例 根据小图片与大图片的大小比例进行切换 
            var percent = objImg.offsetHeight/objSmallBox.offsetHeight; //根据比例移动
            objImg.style[‘left‘] = -left*percent+"px";
            objImg.style[‘top‘] = -top*percent+"px";




        
    

解决IE的不兼容问题

 还有闪现问题 出现问题的原因 但鼠标移动在
            //图片上面的时候触发鼠标事件 出现放大镜 相当于移出图片 放大镜隐藏此时再次出现因此出现以上问题 
            //这个是IE才会出现的问题
            //解决方案 在图片的上面再次添加一个mask层 获取的是这一层的大小和宽度 显示的还是图片 其实很容易理解
            //还有一个是层级高于放大镜就可以了 还有一点就是在IE当中无法获取透明的元素 因此可设置一个背景 再设置
            //透明度为100% filter:alpha(opacity=100%) opacity:100%鼠标移动效果
            //先计算移动的位置
            //鼠标的位置 - demo的左外边距 - smallBox的左边距 - 放大镜自身宽度/2 就是放大镜的相对于父级元素的偏移 此时父元素应该是定位元素

对于效果读者可以自行尝试查看