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 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
小程序点击图片实现png转jpg
Oct 22 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笔记 字符串处理
2010/10/19 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php实现计数器方法小结
2015/01/05 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
php压缩文件夹最新版
2018/07/18 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
Bootstrap CSS组件之导航条(navbar)
2016/12/17 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
如何更好的编写js async函数
2018/05/13 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
Python Socket编程入门教程
2014/07/11 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python安装第三方库的3种方法
2015/06/21 Python
python实现数据库跨服务器迁移
2018/04/12 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
初入社会应届生求职信
2013/11/18 职场文书
校长先进事迹材料
2014/02/01 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
员工合理化建议书
2014/05/19 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
小学班长竞选稿
2015/11/20 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL