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 相关文章推荐
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
再探JavaScript作用域
Sep 24 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
学习Node.js模块机制
Oct 17 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
JS实现鼠标按下拖拽效果
Jul 23 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查看session内容的函数
2008/08/27 PHP
php google或baidu分页代码
2009/11/26 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
2012/01/15 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
Python中Yield的基本用法
2020/10/18 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
法制宣传月活动总结
2014/04/29 职场文书
汽车广告策划方案
2014/05/31 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
红色革命电影观后感
2015/06/18 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android
Python中re模块的元字符使用小结
2022/04/07 Python
关于Redis的主从复制及哨兵问题
2022/06/16 Redis