防京东放大镜的制作

最新推荐文章于 2024-06-14 15:02:13 发布

XIAOERDS

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量126

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/XIAOERDS/article/details/106682557

版权

           /* 盛放小图的盒子 */
#box1{
    width: 180px;
    height: 180px;
    overflow: hidden;
    position: relative;
    left: 100px;
    cursor: move;
}
/* 小图上可拖动的滑块 */
#box1 span{
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    opacity: .5;
    display: inline-block;
    top:0;
    left: 0;
    display: none;
}
/* 盛放大图的盒子 */
#box2{
    width: 500px;
    height: 500px;
    position: absolute;
    overflow: hidden;
    left: 350px;
    top:0;
    display: none;
}
#box2 img{ 
	position: absolute;
 	top:0; 
 	left: 0
 }



    </style>

<body>
  
    <div id="box1">
        <!-- 小图 -->
        <img src="anli.PNG.png">
        <!-- 鼠标移上去出现的拖动块 -->
        <span></span>
    </div>
    <div id="box2">
        <!-- 大图 -->
        <img src="anli.PNG.png">
    </div>
  
<script>
    var  box1 =document.querySelector('#box1')
    var  mask =box1.children[1]
    var box2 =document.querySelector('#box2')
    var bigimg=box2.children[0]
    box1.addEventListener('mouseover',function(){
        mask.style.display ='block'
        box2.style.display ='block'
    })
    box1.addEventListener('mouseout',function(){
        mask.style.display ='none'
        box2.style.display ='none'
    })
    box1.addEventListener('mousemove',function(e){
        var x=e.pageX-box1.offsetLeft-mask.offsetWidth/2 // 小盒子移动的x轴距离=鼠标的x坐标-盒子距离左边框的距离-盒子的宽度
        var y=e.pageY-box1.offsetTop-mask.offsetHeight/2 // 小盒子移动的y轴距离=鼠标的y坐标-盒子距离右边框的距离-盒子的高度
        var mask_Max=box1.offsetWidth-mask.offsetWidth //小盒子的移动的最大距离，因为是正方形，所以宽高移动的最大距离是一样的
        if (x<=0) {            //设置小盒子的最大移动距离和最小移动距离，使这个盒子不超除外面的大盒子
            x=0             
        } else if(x>=mask_Max) {
            x=mask_Max
        }
        if (y<=0) {
            y=0
        } else if(y>=mask_Max) {
            y=mask_Max
        }
        mask.style.left=x+'PX'
        mask.style.top=y+'PX'
        //制作大盒子的跟随
        //使用比例：小盒子的移动距离*大图片的最大移动距离/小盒子的最大移动距离
        var bigmax =bigimg.offsetWidth-box2.offsetWidth
        var bigmay =bigimg.offsetHeight-box2.offsetHeight
        bigx=x*bigmax/mask_Max
        bigy=y*bigmay/mask_Max
        bigimg.style.left=-bigx+'px'  //最后的值是取反的，记得要加px
        bigimg.style.top=-bigy+'px'

XIAOERDS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防京东放大镜的制作

/* 盛放小图的盒子 */#box1{ width: 180px; height: 180px; overflow: hidden; position: relative; left: 100px; cursor: move;}/* 小图上可拖动的滑块 */#box1 span{ position: absolute; width: 100px; height: 100px; background:...
复制链接

扫一扫