JS实现电商放大镜效果

来源：懂视网责编：小采时间：2020-11-27 22:31:48

JS实现电商放大镜效果

JS实现电商放大镜效果:前端JS电商放大镜效果，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>26-电商放大镜</title> <style type=text

推荐度：

点击下载本文 文档为doc格式

导读JS实现电商放大镜效果:前端JS电商放大镜效果，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>26-电商放大镜</title> <style type=text

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

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS实现电商放大镜效果

推荐度：

点击下载本文 文档为doc格式

标签：电商实现 js

热门焦点

JS实现电商放大镜效果

JS实现电商放大镜效果

JS实现电商放大镜效果

最新推荐

猜你喜欢

热门推荐