凡客放大镜效果

最新推荐文章于 2024-07-30 10:56:44 发布

张张张96

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量249

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/Girl_0919/article/details/74085714

版权

Javascript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

凡客放大镜效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .left{
            width:400px;
            height: 400px;
            border:1px solid yellow;
            background:url("img/f.jpg") no-repeat left top;
            background-size:cover;
            float:left;
            margin-right:10px;
            position: relative;
            }
        .box{width:220px;height:200px;background:yellow;opacity: 0.5;
             position: absolute;left:0;top:0;
            cursor: crosshair;
              display: none;}
        #cover{width:400px;height:400px;position: absolute;left:0;top:0;
        background:red;opacity: 0.2;}
        .right{width:440px;height:400px;border:2px solid red;
            position: relative;overflow: hidden;display: none;}
        #pic{position: absolute;left:-400px;top:-360px;}
    </style>
</head>
<body>
  <div class="main clearfix">
      <div class="left">
          <div class="box"></div>
          <div id="cover"></div>
      </div>
      <div class="right">
          <img src="img/f.jpg" alt="style" id="pic"/>
      </div>
  </div>
</body>
<script>
    //获取
    var leftBox=document.getElementsByClassName("left")[0];
    var coverBox=document.getElementById("cover");//防止事件源发生改变
    var moveBox=document.getElementsByClassName("box")[0];
    var rightBox=document.getElementsByClassName("right")[0];
    var movePic=document.getElementById("pic")
    // 为事件源绑定鼠标移动事件
    coverBox.onmousemove=function(e){
        var ev=window.event || e;  //兼容性写法   ev=e?e:event 二元运算符
    //获取鼠标相对于事件源的位置    
        var mouse_left=ev.offsetX || ev.layerX;
        var mouse_top=ev.offsetY || ev.layerY;
    //获取移动盒子的位置    
        var box_left=mouse_left-110;
        var box_top=mouse_top-100;
    //设定盒子移动位置范围
        if(box_left>=180){box_left=180}
        if(box_left<=0) {box_left=0}
        if(box_top>=200) {box_top=200}
        if(box_top<=0) {box_top=0}
    //设置移动盒子的位置   
        moveBox.style.left=box_left+"px"
        moveBox.style.top=box_top+"px"
    //获取图片的位置 （通过观察它和移动盒子的位置关系**-2倍关系）      
        var Pic_left=box_left*(-2)
        var Pic_top=box_top*(-2)
    //设置图片的位置    
        movePic.style.left=Pic_left+"px"
        movePic.style.top=Pic_top+"px"
    }
    //为事件源设置鼠标移入事件
    coverBox.onmouseover=function(){
        moveBox.style.display="block"
        rightBox.style.display="block"
    }
    //为事件源设置鼠标移出事件
    coverBox.onmouseout=function(){
        moveBox.style.display="none"
        rightBox.style.display="none"
    }
</script>
</html>

注意大小关系

左边盒子：400x400

移动盒子：220x200

右边盒子：440x400

图片大小：800x400

张张张96

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
凡客放大镜效果

凡客放大镜效果<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .left{ width:400px; height: 400px; border:1px solid
复制链接

扫一扫

专栏目录