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高级技巧
Dec 20 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
深入理解js generator数据类型
Aug 16 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 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调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
从零开始学YII2框架(四)扩展插件yii2-kartikgii
2014/08/20 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
iview实现图片上传功能
2020/06/29 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
Python深入06——python的内存管理详解
2016/12/07 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
自动化专业个人求职信范文
2013/11/29 职场文书
大学生的四年学习自我评价
2013/12/13 职场文书
班级活动策划书
2014/02/06 职场文书
愚人节活动策划方案
2014/03/11 职场文书
关于保护环境的建议书
2014/05/13 职场文书
2015年售票员工作总结
2015/04/29 职场文书
文艺委员竞选稿
2015/11/19 职场文书