js实现橱窗展示效果


Posted in Javascript onJanuary 11, 2020

本文实例为大家分享了js实现橱窗展示的具体代码,供大家参考,具体内容如下

思路

1、获取需要的标签

2、求出滚动条的长度(公式:滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度)

3、监听鼠标按下事件:3 设置起始位置

4、监听鼠标的移动:

4.1求出移动的位置
4.2判断滚动条的位置(防超出)
4.3 移动滚动条、商品滚动(公式:内容走的距离 = (内容的长度 - 盒子的长度) / (盒子长度 - 滚动条的长度) * 滚动条走的距离);

5、监听鼠标的离开事件:把鼠标的移动事件设置为无即可。

<script>
    window.onload = function (){
      //1.获取需要的标签
      var box = document.getElementById("box");
      var box_top = box.children[0];
      var box_bottom = box.children[1];
      var mask = box_bottom.children[0];
      //2.获取滚动条长度
      // 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
      var mask_length = (box.offsetWidth /box_top.offsetWidth) * box.offsetWidth;
      mask.style.width = mask_length + "px";
      //3.监听鼠标按下的事件
      mask.onmousedown = function (event){
        var event = event || window.event;
        //3.1设置起始位置
        var beginX = event.clientX - mask.offsetLeft;
        //3.2 监听鼠标的移动
        document.onmousemove =function (event){
          var event = event || window.event;
          //3.2.1求移动的位置
          var endX = event.clientX - beginX;

          //3.2.2处理边界值
          if(endX < 0){
            endX = 0
          }else if(endX >= box.offsetWidth - mask.offsetWidth){
            endX = box.offsetWidth - mask.offsetWidth;
          }
          //3.2.3让滚动条滚动
          mask.style.left = endX + "px";

          //3.2.4 让商品随着滚动
          //公式:内容走的距离 = (内容的长度 - 盒子的长度) / (盒子长度 - 滚动条的长度) * 滚动条走的距离
          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>

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

Javascript 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
javascript字符串拼接的效率问题
Dec 25 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
jqTransform美化表单
Oct 10 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
小程序自定义弹框效果
Nov 16 Javascript
vue实现购物车选择功能
Jan 10 #Javascript
webpack proxy 使用(代理的使用)
Jan 10 #Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 #Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 #Javascript
jQuery操作动画完整实例分析
Jan 10 #jQuery
基于JavaScript判断两个对象内容是否相等
Jan 10 #Javascript
jQuery操作事件完整实例分析
Jan 10 #jQuery
You might like
PHP开发中常用的字符串操作函数
2011/02/08 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
深入学习python的yield和generator
2016/03/10 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
python批量创建指定名称的文件夹
2019/03/21 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
python如何求100以内的素数
2020/05/27 Python
python中if及if-else如何使用
2020/06/02 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
七年级历史教学反思
2014/02/05 职场文书
本科毕业生自荐信
2014/06/02 职场文书
鼓舞士气的口号
2014/06/16 职场文书
经典祝酒词大全
2015/08/12 职场文书
工作简历的自我评价
2019/05/16 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript