欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-10 10:02:00
本文实例为大家分享了js实现电商商品展示放大镜的具体代码,供大家参考,具体内容如下 知识点 1.使用children获取字标签组 2.求当前鼠标坐标 3.碰撞检测 4.大小盒...

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

知识点

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

运行效果

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

代码

<!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>

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