DDR爱好者之家

JavaScript实现京东购物放大镜和选项卡效果的方法分析
站长资源 2024/11/26 佚名
71 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了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="/UploadFiles/2021-04-02/m1.jpg">


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/"//img.jbzj.com/file_images/article/201807/201875102704751.png" alt="" />


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


更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》


希望本文所述对大家JavaScript程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米