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


Posted in Javascript onJanuary 07, 2020

本文实例为大家分享了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>

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

Javascript 相关文章推荐
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
Sep 10 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
JS实现字体背景跑马灯
Jan 06 #Javascript
JS实现音乐钢琴特效
Jan 06 #Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 #Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 #Javascript
Vue前端项目部署IIS的实现
Jan 06 #Javascript
Vue学习之常用指令实例详解
Jan 06 #Javascript
Vue学习之组件用法实例详解
Jan 06 #Javascript
You might like
PHP+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
vue.js实现输入框输入值内容实时响应变化示例
2018/07/07 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
课外活动总结
2015/02/04 职场文书
个人总结格式范文
2015/03/09 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
MySql分区类型及创建分区的方法
2022/04/13 MySQL
MySQL分布式恢复进阶
2022/07/23 MySQL