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图片自动轮播代码分享(js图片轮播)
May 06 Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
Vue2仿淘宝实现省市区三级联动
Apr 15 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
详解Vue串联过滤器的使用场景
Apr 30 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php和javascript之间变量的传递实现代码
2012/12/19 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
php并发加锁示例
2016/10/17 PHP
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
python小技巧之批量抓取美女图片
2014/06/06 Python
python3.x上post发送json数据
2018/03/04 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
导购员的岗位职责
2014/02/08 职场文书
活动总结模板
2014/05/09 职场文书
电力培训心得体会
2014/09/02 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
2014年施工员工作总结
2014/11/18 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
公司周年庆典致辞
2015/07/30 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书