原生js实现放大镜效果

作者: jane819 | 来源:发表于2018-11-12 22:19 被阅读0次

原生JS实现Tab切换效果和模态框效果
原生js实现放大镜效果
原生js放大镜效果
小程序自定义swiper组件样式
小记setTimeout
js实现放大镜效果
JS实现放大镜效果
date时间对象的运用之vue动态遍历获取指定年份输出
商品图像放大镜效果（原生JS）
原生JS实现翻页效果

html 代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>原生js实现放大镜效果</title>
    <style type="text/css">
            #box{
                position: relative;
            }
            .small_img{
                width:200px;
                height: 200px;
                position: absolute;
                left: 0;
            }
            .small_img img{
                width:100%;
                height:100%;
            }
            .slide{
                position: absolute;
                left:0;
                top:0;
                width:100px;
                height: 100px;
                background: rgba(255,255,255,0.3);
                cursor: move;
                display: none;
                z-index: 200;
            }
            .big_img{
                position:absolute;
                width:200px;
                height: 200px;
                left:210px;
                overflow: hidden;
                box-sizing: border-box;
                border: 1px solid #000;
            }
            .big_img img{
                width:400px;
                height:400px;
                position: absolute;
            }
    </style>
</head>
<body>
    <div id="box">
        <!--左侧-->
        <div class="small_img">
            <!--滑块-->
            <div class="slide"></div>
            <img src="jane.jpg" alt="" />
        </div>
        <!--右侧-->
        <div class="big_img">
            <img src="jane.jpg" alt="" class="jane"/>
        </div>
    </div>
</body>
</html>
<script src="demo.js"></script>

js代码

window.onload=function(){
    //左侧图片元素
    var smallImg=document.getElementsByClassName('small_img')[0];
    //滑块元素
    var slide=document.getElementsByClassName('slide')[0];
    //右侧图片元素
    var bigImg=document.getElementsByClassName('big_img')[0];
    //图片
    var jane=document.getElementsByClassName('jane')[0];
    //针对左侧添加移入、移出事件
    //移入
    smallImg.onmousemove=function(event){
        //滑块显示
        slide.style.display="block";
        //大图显示
        bigImg.style.display="block";
        //e.clientX当前移入点的位置  - slide.offsetWidth/2=滑块距离左侧x的位置
        var left=event.clientX-slide.offsetWidth/2;
        //e.clientY当前移入点的位置  - slide.offsetHeight/2=滑块距离顶部y的位置
        var top=event.clientY-slide.offsetHeight/2;
        //最大移动的范围
        if(left<0){
            left=0;
        }else if(left>smallImg.offsetWidth-slide.offsetWidth){
            left=smallImg.offsetWidth-slide.offsetWidth;
        }
        if(top<0){
            top=0;
        }else if(top>smallImg.offsetHeight-slide.offsetHeight){
            top=smallImg.offsetHeight-slide.offsetHeight;
        }
        //给滑块的left和top值赋值
        slide.style.left=left+'px';
        slide.style.top=top+'px';
        //右侧图片赋值   *2的原因是两边的关系是1：2 刚好左边是右边的一半，所以右侧的图片必须是2倍的关系   
        //比例=大图：小图
        jane.style.left=-left*2+'px';
        jane.style.top=-top*2+'px';
        
    }
    //移出
    smallImg.onmouseout=function(){
        //滑块隐藏
        slide.style.display="none";
        //大图显示
        bigImg.style.display="none";
    }
}