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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
javascript Event对象详解及使用示例
Nov 22 Javascript
jQuery中:header选择器用法实例
Dec 29 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
php自定义错误处理用法实例
2015/03/20 PHP
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
使用Python操作excel文件的实例代码
2017/10/15 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
python生成lmdb格式的文件实例
2018/11/08 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
Python中的__init__作用是什么
2020/06/09 Python
python如何实现图片压缩
2020/09/11 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
交通违章检讨书
2014/09/21 职场文书
技术负责人岗位职责
2015/02/10 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
公司车辆管理制度
2015/08/04 职场文书
个人业务学习心得体会
2016/01/25 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python