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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
Javascript 数组排序详解
Oct 22 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
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引用效率问题分析
2012/03/23 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
javascript 注释代码的几种方法总结
2017/01/04 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
Python while循环使用else语句代码实例
2020/02/07 Python
django model object序列化实例
2020/03/13 Python
python3 配置logging日志类的操作
2020/04/08 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
表彰先进集体通报
2014/01/12 职场文书
实验室的标语
2014/06/20 职场文书
太行山上观后感
2015/06/05 职场文书
推广普通话的宣传语
2015/07/13 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书