当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现电商商品展示放大镜特效

JS实现电商商品展示放大镜特效

2020年03月09日  | 移动技术网IT编程  | 我要评论

柳州三维地图,丝婚 莲赋妩,天线宝宝中文版全集高清在线观看

本文实例为大家分享了js实现电商商品展示放大镜的具体代码，供大家参考，具体内容如下

知识点

1.使用children获取字标签组
2.求当前鼠标坐标
3.碰撞检测
4.大小盒子通过比例同步

运行效果

代码

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>title</title>
 <style>
 * {
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
 }

 #box {
  width: 350px;
  height: 350px;
  margin: 100px 0 0 100px;
  position: relative;
 }

 #box > #small_box {
  height: 100%;
  width: 100%;
  border: 1px solid #cccccc;
  box-sizing: border-box;
  position: relative;
 }

 #box > #small_box > img {
  height: 100%;
  width: 100%;
 }

 #box > #small_box > #mask {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 255, 0, .4);
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
  /*隐藏*/
  display: none;
 }

 #box > #big_box {
  height: 600px;
  width: 600px;
  border: 1px solid #cccccc;
  position: absolute;
  left: 360px;
  top: 0;
  overflow: hidden;
  display: none;
 }
 #box > #big_box > img{
  position: absolute;
  left: 0;
  top: 0;
 }
 #list {
  margin: 20px 0 0 100px;
 }

 #list ul li {
  float: left;
  margin: 5px;
  cursor: pointer;
 }
 </style>
</head>
<body>
<div id="box">
 <div id="small_box">
 <img src="images/pic001.jpg" alt="">
 <span id="mask"></span>
 </div>
 <div id="big_box">
 <img src="images/pic01.jpg" alt="">
 </div>
</div>
<div id="list">
 <ul>
 <li><img src="images/pic0001.jpg" alt=""></li>
 <li><img src="images/pic0002.jpg" alt=""></li>
 <li><img src="images/pic0003.jpg" alt=""></li>
 <li><img src="images/pic0004.jpg" alt=""></li>
 </ul>
</div>
<script src="../../mytools/mytools.js"></script>
<script>
 window.addeventlistener('load', function (ev) {
 // 1. 获取标签
 var box = mytools.$('box'), s_box = box.children[0], b_box = box.children[1], mask = s_box.children[1];
 var list_lis = mytools.$('list').getelementsbytagname('li');
  b_img = b_box.children[0];
 // 2. 监听鼠标进入小盒子
 s_box.addeventlistener('mouseover', function (evt) {
  // 2.1 显示隐藏内容
  mask.style.display = 'block';
  b_box.style.display = 'block';
  // 2.2 监听鼠标移动
  s_box.addeventlistener('mousemove', function (evt1) {
  var e = evt1 || window.event;
  // 2.3 求出鼠标坐标
  var pointx = e.pagex - box.offsetleft - mask.offsetwidth * 0.5;
  var pointy = e.pagey - box.offsettop - mask.offsetheight * 0.5;
  // 2.4 边界碰撞检测
  if (pointx < 0) {
   pointx = 0
  } else if (pointx >= s_box.offsetwidth - mask.offsetwidth - 2) {
   pointx = s_box.offsetwidth - mask.offsetwidth - 2;
  }
  if (pointy < 0) {
   pointy = 0
  } else if (pointy >= s_box.offsetheight - mask.offsetheight - 2) {
   pointy = s_box.offsetheight - mask.offsetheight - 2;
  }
  // 2.5 让放大镜走起来
  mask.style.left = pointx + 'px';
  mask.style.top = pointy + 'px';
  // 2.6 让大盒子中图片走起来
  /*
  * smallx / bigx = sbox.width / bbox.width
  * bixx = smallx/(sbox.width / bbox.width)
  * */
  b_img.style.left = -pointx / (s_box.offsetwidth/b_box.offsetwidth) + 'px';
  b_img.style.top = -pointy / (s_box.offsetheight/b_box.offsetheight) + 'px';

  })
 });
 // 3. 监听鼠标离开小盒子
 s_box.addeventlistener('mouseout', function (evt) {
  // 2.1 隐藏内容
  mask.style.display = 'none';
  b_box.style.display = 'none';
 });
 // 4. 监听鼠标点击li标签

 for (var i = 0; i < list_lis.length; i++) {
  (function (i) {
  var li = list_lis[i];
  li.addeventlistener('mouseover',function (ev1) {
   s_box.children[0].src = 'images/pic0'+(i+1)+'.jpg';
   b_img.src = 'images/pic0'+(i+1)+'.jpg';
  });
  })(i);
 }
 });
</script>
</body>
</html>

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网