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 相关文章推荐
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
Nov 25 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
JavaScript惰性载入函数实例分析
Mar 27 Javascript
JavaScript流程控制(循环)
Dec 06 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
Terran剧情介绍
2020/03/14 星际争霸
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
初步剖析C语言编程中的结构体
2016/01/16 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Python分类测试代码实例汇总
2020/07/23 Python
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
求职毕业生自荐书
2014/02/08 职场文书
开学典礼策划方案
2014/05/28 职场文书
ktv好的活动方案
2014/08/17 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
就业协议书范本
2014/10/08 职场文书
经典祝酒词大全
2015/08/12 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS