JS实现商品橱窗特效


Posted in Javascript onJanuary 09, 2020

本文实例为大家分享了JS实现商品橱窗特效的具体代码,供大家参考,具体内容如下

知识点

换算公式
① 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
滚动条长度/盒子的长度 = 盒子的长度/内容的长度
② 内容走的距离 = (内容的长度 - 盒子的长度)/ (盒子的长度 - 滚动条的长度)* 滚动条走的距离

运行效果

JS实现商品橱窗特效

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
   border:none;
  }

  #box{
   width: 800px;
   height: 200px;
   border: 1px solid #ddd;

   position: relative;
   margin: 100px auto;

   overflow: hidden;
  }

  #box ul{
   width: 5200px;
   position: absolute;
   left: 0;
   top: 20px;
  }

  #box ul li{
   float: left;
  }

  #box_bottom{
   position: absolute;
   left: 0;
   bottom: 0;
   background-color: #e8e8e8;

   width: 100%;
   height: 25px;
  }

  .mask{
   position: absolute;
   left: 0;
   top:0;
   height: 25px;
   background-color: orangered;
   border-radius: 12px;
   cursor: pointer;
  }
 </style>
</head>
<body>
 <div id="box">
  <ul id="box_top">
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img3.jpg" alt=""></li>
   <li><img src="images/img4.jpg" alt=""></li>
   <li><img src="images/img5.jpg" alt=""></li>
   <li><img src="images/img6.jpg" alt=""></li>
   <li><img src="images/img7.jpg" alt=""></li>
   <li><img src="images/img8.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img3.jpg" alt=""></li>
   <li><img src="images/img4.jpg" alt=""></li>
   <li><img src="images/img5.jpg" alt=""></li>
   <li><img src="images/img6.jpg" alt=""></li>
   <li><img src="images/img7.jpg" alt=""></li>
   <li><img src="images/img8.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img3.jpg" alt=""></li>
   <li><img src="images/img4.jpg" alt=""></li>
   <li><img src="images/img5.jpg" alt=""></li>
   <li><img src="images/img6.jpg" alt=""></li>
   <li><img src="images/img7.jpg" alt=""></li>
   <li><img src="images/img8.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
   <li><img src="images/img3.jpg" alt=""></li>
   <li><img src="images/img4.jpg" alt=""></li>
   <li><img src="images/img5.jpg" alt=""></li>
   <li><img src="images/img6.jpg" alt=""></li>
   <li><img src="images/img7.jpg" alt=""></li>
   <li><img src="images/img8.jpg" alt=""></li>
   <li><img src="images/img1.jpg" alt=""></li>
   <li><img src="images/img2.jpg" alt=""></li>
  </ul>
  <div id="box_bottom">
   <span class="mask"></span>
  </div>
 </div>

<script>
 window.onload = function () {
  // 1. 获取需要的标签
  var box = document.getElementById("box");
  var box_top = document.getElementById("box_top");
  var box_bottom = document.getElementById("box_bottom");
  var mask = box_bottom.children[0];

  // 2. 设置滚动条的长度
  // 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
  var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
  mask.style.width = mask_len + 'px';

  // 3. 鼠标操作
  mask.onmousedown = function (event) {
   var e = event || window.event;

   // 3.1 求出初始值
   var beginX = e.clientX - mask.offsetLeft;

   // 3.2 移动
   document.onmousemove = function (event) {
    var e = event || window.event;

    // 3.3 求出移动的距离
    var endX = event.clientX - beginX;

    // 边界值
    if(endX < 0){
     endX = 0;
    }else if(endX >= box.offsetWidth - mask.offsetWidth){
     endX = box.offsetWidth - mask.offsetWidth;
    }


    // 3.4 动起来
    mask.style.left = endX + 'px';

    // 内容走的距离 = (内容的长度 - 盒子的长度)/ (盒子的长度 - 滚动条的长度)* 滚动条走的距离
    var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX;
    box_top.style.left = -content_len + 'px';

    return false;
   };

   document.onmouseup = function () {
    document.onmousemove = null;
   }
  }
 }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
微信小程序实现页面浮动导航
Jan 08 #Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 #Javascript
小程序自定义模板实现吸顶功能
Jan 08 #Javascript
微信小程序静默登录的实现代码
Jan 08 #Javascript
微信小程序wxs实现吸顶效果
Jan 08 #Javascript
微信小程序实现吸顶特效
Jan 08 #Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 #Javascript
You might like
自己前几天写的无限分类类
2007/02/14 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
Yii核心验证器api详解
2016/11/23 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python实现多并发访问网站功能示例
2017/06/19 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
打架检讨书100字
2014/01/19 职场文书
城管个人总结
2015/02/28 职场文书
关于教师节的广播稿
2015/08/19 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技