JS实现电商放大镜效果

2019-11-19 15:41:43

字体：大中小

来源：转载

供稿：网友

前端JS电商放大镜效果，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>26-电商放大镜</title>  <style type="text/css">      *{    padding: 0;    margin: 0;  }  #left{   padding: 0;  margin: 0;    width: 400px;    height: 400px;    border: 2px solid blue;    background: url(http://chuantu.biz/t6/17/1503469475x2063891122.jpg) no-repeat;    float: left;    cursor: crosshair;    position: relative;  box-sizing: border-box;  }  #box{    width: 200px;    height: 200px;    background: white;    opacity: 0.6;    position: absolute;    top: 0;    left: 0;    display: none;  box-sizing: border-box;  }  #cover{    width: 400px;    height: 400px;    background: red;    position: absolute;    left: 0;    top: 0;    opacity: 0;  box-sizing: border-box;  }  #right{    width: 400px;    height: 400px;    border: 2px solid black;    overflow: hidden;    position: relative;    display: none;  box-sizing: border-box;  }  #rpic{    position: absolute;  }  </style>  <script type="text/javascript">      window.onload = function(){    var left = document.getElementById("left");    var right = document.getElementById("right");    var rpic = document.getElementById("rpic");    var box = document.getElementById("box");    var cover = document.getElementById("cover");    // 给左侧加鼠标移动事件    cover.onmousemove = function(){      //获得事件对象      var ev = window.event;      var mouse_left = ev.offsetX || ev.layerX;      var mouse_top = ev.offsetY || ev.layerY;      // document.title = mouse_left + '|' + mouse_top;      //计算色块的位置      var box_left = mouse_left - 100;      var box_top = mouse_top - 100;      // 判断是否超出      if (box_left < 0) {        box_left = 0;      }      if (box_left > 200) {        box_left = 200;      }      if (box_top < 0) {        box_top = 0;      }      if (box_top > 200) {        box_top = 200;      }      // 让色块移动      box.style.left = box_left + 'px';      box.style.top = box_top + 'px';      //计算右侧图片位置      var rpic_left = box_left*-2;      var rpic_top = box_top*-2;      // 让右侧移动      rpic.style.left = rpic_left + 'px';      rpic.style.top = rpic_top + 'px';    }      //给左侧加鼠标移入事件      cover.onmouseover = function(){        // 让左侧色块和右侧隐藏        box.style.display = 'block';        right.style.display = 'block';      }      // 给左侧加鼠标移出事件      cover.onmouseout = function(){        // 让左侧色块和右侧隐藏        box.style.display = 'none';        right.style.display = 'none';      }  }  </script></head><body>  <div id="left">    <div id="box"></div>    <div id="cover"></div>  </div>  <div id="right">    <img src="http://chuantu.biz/t6/17/1503469419x2063891122.jpg" id="rpic">  </div></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：VueJS 集成 Medium Editor的示例代码（自定义编辑器按钮）

下一篇：weui框架实现上传、预览和删除图片功能代码