JavaScript实现京东购物放大镜和选项卡效果的方法分析


Posted in Javascript onJuly 05, 2018

本文实例讲述了JavaScript实现京东购物放大镜和选项卡效果的方法。分享给大家供大家参考,具体如下:

购物网站点击商品后,都会有一个查看物品图片,并且可以放大仔细观察物品的功能。这个功能看起来复杂,其实实现起来非常简单。下面我们来一起做这个小效果吧!

首先,我们看一下页面的布局:

JavaScript实现京东购物放大镜和选项卡效果的方法分析

1.小图片显示区,上面有一个方形遮罩层
2.缩略图横向列表
3.大图显示区域

然后,我们写出开发步骤:

1.编写3个区域的html布局,使他们位于同一个容器内
2.显示区域2的图片列表
3.给区域2的图片添加mouseover事件,使图片显示在区域1内
4.鼠标移入区域1,生成半透明的选择框
5.区域3显示区域2选择框对应的图片位置放大的效果
6.鼠标移除区域2,区域3隐藏

最后,根据需求写出相应代码:

html和css:

<style>
    ul{
      list-style: none;
      padding: 0;
    }
    .zoom-box{
      position: relative;
      width: 452px;
    }
    .small-box{
      border: 1px solid #ccc;
      position: relative;
    }
    .small-box .square{
      position: absolute;
      background-color: yellow;
      opacity: 0.5;
      display: none;
    }
    .small-box .mask{
      width: 100%;
      height: 100%;
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
    }
    .img-list ul:after{
      clear: both;
      content: '';
      display: table;
    }
    .img-list ul li{
      float: left;
      padding: 0 8px;
    }
    .img-list img{
      border: 2px solid transparent;
    }
    .img-list img.active{
      border: 2px solid red;
    }
    .big-box{
      position: absolute;
      top:0;
      left: 100%;
      margin-left: 2px;
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
      display: none;
      overflow: hidden;
    }
    .big-box img{
      position: absolute;
    }
  </style>
</head>
<body>
<div class="zoom-box">
  <div class="small-box">
    <img src="../../../img/京东放大镜/m1.jpg" alt="">
    <div class="square">
    </div>
    <div class="mask"></div>
  </div>
  <div class="img-list">
    <ul>
      <li><img class="active" src="../../../img/京东放大镜/s1.jpg" alt="" data-small="../../../img/京东放大镜/m1.jpg"
           data-big="../../../img/京东放大镜/b1.jpg"></li>
      <li><img src="../../../img/京东放大镜/s2.jpg" alt="" data-small="../../../img/京东放大镜/m2.jpg"
           data-big="../../../img/京东放大镜/b2.jpg"></li>
      <li><img src="../../../img/京东放大镜/s3.jpg" alt="" data-small="../../../img/京东放大镜/m3.jpg"
           data-big="../../../img/京东放大镜/b3.jpg"></li>
      <li><img src="../../../img/京东放大镜/s4.jpg" alt="" data-small="../../../img/京东放大镜/m4.jpg"
           data-big="../../../img/京东放大镜/b4.jpg"></li>
      <li><img src="../../../img/京东放大镜/s5.jpg" alt="" data-small="../../../img/京东放大镜/m5.jpg"
           data-big="../../../img/京东放大镜/b5.jpg"></li>
      <li><img src="../../../img/京东放大镜/s6.jpg" alt="" data-small="../../../img/京东放大镜/m6.jpg"
           data-big="../../../img/京东放大镜/b6.jpg"></li>
    </ul>
  </div>
  <div class="big-box">
    <img src="../../../img/京东放大镜/b1.jpg" alt="">
  </div>
</div>

js代码:

<script>
  var smallBox=$('.small-box .mask');
  var smallImg=$('.small-box img');
  var square=$('.square');
  var imagesList=$all('.img-list img');
  var bigBox=$('.big-box');
  var bigImg=$('.big-box img');
  //选项卡切换
  for(var i=0;i<imagesList.length;i++){
    imagesList[i].onmouseover=function () {
      for (var j=0;j<imagesList.length;j++){
        imagesList[j].className='';
      }
      this.className='active';
      bigImg.src=this.getAttribute('data-big');
      smallImg.src=this.getAttribute('data-small');
    }
  }
  //鼠标移进事件
  smallBox.onmouseover=function () {
    square.style.display='block';
    bigBox.style.display='block';
    //利用比例公式计算square的宽高
    //square的宽/smallImg的宽 = bigBox的宽/bigIma的宽
    square.style.width=smallImg.offsetWidth * bigBox.offsetWidth / bigImg.offsetWidth + 'px';
    square.style.height=smallImg.offsetHeight * bigBox.offsetHeight / bigImg.offsetHeight + 'px';
  };
  //鼠标移出事件
  smallBox.onmouseout=function () {
    square.style.display='none';
    bigBox.style.display='none';
  };
  //鼠标移动事件
  smallBox.onmousemove=function (e) {
    var e=e||window.event;
    var x,y;
    //x和y的坐标
    x=e.offsetX-square.offsetWidth/2;
    y=e.offsetY-square.offsetHeight/2;
    if(x<0){
      x=0;
    }
    if(x>smallBox.offsetWidth-square.offsetWidth){
      x=smallBox.offsetWidth-square.offsetWidth;
    }
    if(y<0){
      y=0;
    }
    if(y>smallBox.offsetHeight-square.offsetHeight){
      y=smallBox.offsetHeight-square.offsetHeight;
    }
    square.style.left=x+'px';
    square.style.top=y+'px';
    //利用公式计算大图的坐标
    //<!--// x/?=smallimg.w/bigimg.w-->
    //<!--// y/?=smallimg.h/bigimg.h-->
    bigImg.style.left=-x * bigImg.offsetWidth / smallImg.offsetWidth + 'px';
    bigImg.style.top=-y * bigImg.offsetHeight / smallImg.offsetHeight + 'px';
  };
  function $(name) {
    return document.querySelector(name);
  }
  function $all(name) {
    return document.querySelectorAll(name);
  }
</script>

大家可以做一下看看效果:

JavaScript实现京东购物放大镜和选项卡效果的方法分析

添加一个mask的div是因为,如果直接在smallBox上添加事件,会受到其中的子元素的影响,导致图片抖动。而对一个空内容的mask操作就不会有影响了。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
简单的js表单验证函数
Oct 28 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
微信小程序实现左右联动的实战记录
Jul 05 #Javascript
vue实现自定义多选与单选的答题功能
Jul 05 #Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 #Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 #Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 #Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 #Javascript
vue两个组件间值的传递或修改方式
Jul 04 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
使用PHP维护文件系统
2006/10/09 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
思想政治自我鉴定
2013/10/06 职场文书
师范毕业生自荐信
2013/10/17 职场文书
教师党员承诺书2015
2015/01/21 职场文书
工作检讨书大全
2015/01/26 职场文书
运动会报道稿大全
2015/07/23 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js