JS实现电商放大镜效果

更新时间：2020-06-01 10:12:01 作者：startmvc

前端JS电商放大镜效果，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head>

前端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>

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