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的方法制作一个简单的导航栏
Jun 23 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
js实现动态增加文件域表单功能
2018/10/22 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python读取网页内容的方法
2015/07/30 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
财务会计专业毕业生自荐信
2013/10/19 职场文书
网页设计个人找工作求职信
2013/11/28 职场文书
企业党员个人自我评价
2014/09/20 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
青年志愿者活动感想
2015/08/07 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL