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 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
Element InputNumber 计数器的实现示例
Aug 03 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执行速度全攻略(下)
2006/10/09 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
php+mysql实现无限级分类
2015/11/11 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
JS实现留言板功能
2017/06/17 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
python 实现两个线程交替执行
2020/05/02 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
城市精细化管理实施方案
2014/03/04 职场文书
影子教师研修方案
2014/06/14 职场文书
公司股东合作协议书
2014/09/14 职场文书
董事长致辞
2015/07/29 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Moment的feature导致线上bug解决分析
2022/09/23 Javascript