在前面一篇说的是滚动条效果，本篇继续在前面的基础上面针对滚动条进行操作。本次要实现的效果如下：拖动滚动条左右移动时，上面的图片内容也相对外层盒子做相对移动。

下面针对要实现的效果进行分析：首先是页面基础结构，要实现内容的相对移动，里面的内容需要针对外层盒子相对定位，宽度应该大于外层盒子，而且外层盒子应该超出隐藏。下面是一个滚动条，由底层和滚动两部分组成。

<!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: 2600px;

            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;
            width:100px;

            background-color: #aaa;

            border-radius: 12px;

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div id="box">

        <ul id="box_top">

            <li><img src="data:images/img1.jpg" alt=""></li>

            <li><img src="data:images/img2.jpg" alt=""></li>

            <li><img src="data:images/img3.jpg" alt=""></li>

            <li><img src="data:images/img4.jpg" alt=""></li>

            <li><img src="data:images/img5.jpg" alt=""></li>

            <li><img src="data:images/img6.jpg" alt=""></li>

            <li><img src="data:images/img7.jpg" alt=""></li>

            <li><img src="data:images/img8.jpg" alt=""></li>

            <li><img src="data:images/img1.jpg" alt=""></li>

            <li><img src="data:images/img2.jpg" alt=""></li>

            <li><img src="data:images/img1.jpg" alt=""></li>

            <li><img src="data:images/img2.jpg" alt=""></li>

            <li><img src="data:images/img3.jpg" alt=""></li>

            <li><img src="data:images/img4.jpg" alt=""></li>

            <li><img src="data:images/img5.jpg" alt=""></li>

            <li><img src="data:images/img6.jpg" alt=""></li>

            <li><img src="data:images/img7.jpg" alt=""></li>

            <li><img src="data:images/img8.jpg" alt=""></li>

            <li><img src="data:images/img1.jpg" alt=""></li>

            <li><img src="data:images/img2.jpg" alt=""></li>

        </ul>

        <div id="box_bottom">

            <span class="mask"></span>

        </div>

    </div>

</body>

</html>

此时我们已经实现了基础的页面效果，但是，需要注意的时，在上面的效果中，我们为滚动条设置了滚动宽度，但是在实际过程中，当外层盒子宽度固定时，滚动内容越长，滚动条会越短。为了实现拖动滚动条时，内容相对运动，在滚动条和内容之间存在着一定的比例关系：滚动条 / 盒子的长度 = 盒子的长度 / 内容的长度，因此，我们首先需要根据这个关系计算出滚动条实际的宽度。

<script>

    window.onload = function () {

        //获取需要的标签

        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];

        //滚动条的长度

        // 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度

        var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;

        mask.style.width = mask_len + 'px';

    }

</script>

接下来就需要监听鼠标事件了，首先是鼠标的移入事件，当鼠标移入时，记录鼠标相对于盒子左边的距离，当鼠标移动时，根据鼠标的移动距离，改变滚动条的位置，实现滚动效果，同时需要计算出内容相对需要滚动的距离，最后就是鼠标移出事件，当鼠标移出时，清空事件。

其中，在滚动条移动和内容滚动之间也存在一个换算关系：内容走的距离 / 滚动条走的距离 = （内容的长度 - 盒子的长度）/ （盒子长度 - 滚动条的长度）。因此，当我们计算处了滚动条走的距离后，就可以得出内容走的距离了。

        //鼠标事件

        mask.onmousedown = function (event) {

            var e = event || window.event;

            //求出初始值

            var beginX = e.clientX - mask.offsetLeft;

            document.onmousemove = function (event) {

                var e = event || window.event;

                //求出移动的距离

                var endX = event.clientX - beginX;

                // 滚动边界值

                if(endX <){

                    endX = 0;

                }else if(endX >= box.offsetWidth - mask.offsetWidth){

                    endX = box.offsetWidth - mask.offsetWidth;

                }

                //运动效果

                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;

            }

        }

只需要把握住盒子，滚动条，内容之间的换算关系，计算处相对运动距离，上面的效果就可以轻松实现了。

完整代码下载：点这里

JS之滚动条效果2的更多相关文章

  1. JS之滚动条效果

    滚动条在前端页面中是进行见到的,但是在不同的浏览器中,默认的滚动条样式不同,有些浏览器的默认样式也不好更改,因此,我们可以自定义滚动条,接下来就从一个实例开始进入滚动条. 简易进度条 首先要实现的是上 ...

  2. html和js实现滚动条效果

    HTML部分 <!-- 遮罩层 --> <div id="zzc" style="z-index:-1;height:100%;width: 100%; ...

  3. jQuery实现模拟滚动条效果；

    滚动条在web开发中,很常见,原生的HTML滚动条很难看,因此很多网站借助JS来模拟实现滚动条效果: 滚动条的实现原理其实比较简单,拿垂直滚动条来说: 1),最外层容器需要设置overflow:hid ...

  4. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  5. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  6. JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)

    由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...

  7. js判断滚动条是否已到页面最底部或顶部实例

    原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...

  8. CSS实现导航栏底部动态滚动条效果

    预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在<li></li>标签中让<span>元素的宽度由0变化 ...

  9. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

随机推荐

  1. Count the Sheep 思维题

    Altough Skipping the class is happy, the new term still can drive luras anxious which is of course b ...

  2. cglib实现动态代理简单使用

    Boss: package proxy.cglib; public class Boss{ public void findPerson() { System.out.println("我要 ...

  3. 《DSP using MATLAB》Problem5.16

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  4. easyui的select使用

    这是一个小demo,其他相关功能查看easyuiAPI,需要注意的是valueField: 'id', textField: 'name'中id指json的key,name指json的值,id和nam ...

  5. LG4091 【[HEOI2016/TJOI2016]求和】

    前置:第二类斯特林数 表示把\(n\)个小球放入\(m\)个不可区分的盒子的方案数 使用容斥原理分析,假设盒子可区分枚举至少有几个盒子为空,得到通项: \[S(n,m)=\frac{1}{m!}\su ...

  6. url和资源的再理解

    元数据管理系统中, 确实是所有的静态资源都放在WebContent 不在dgs这个主项目中,通过url访问了 下面的这个项目在dgs中

  7. oracle使用一条语句批量插入多条数据

    例如我有一个test表 create table (stuid int,name varchar(20); 插入多条数据,注意不能直接使用insert into test values(1,'a'), ...

  8. postgresql的基本使用，以及数据库的备份与恢复

    安装过程没什么说的,基本是一直下一步下一步,就是中间需要输入密码之类的 postgresql使用模式是数据库表,视图等的集合,我们可以自荐创建一个schema 创建表的方法 进入sql命令行窗口的方法 ...

  9. SharePoint Online 使用 adal js 获取access token

    最近在写一些SharePoint 的sample code, 有兴趣的小伙伴可以查看我的GitHub. 今天给大家介绍SharePoint Framework (SPFx  )web part 当中怎 ...

  10. COM，SOM， QT, GObject, ObjectiveC

    COM,SOM, QT, GObject, ObjectiveC https://en.wikipedia.org/wiki/IBM_System_Object_Model#Comparison_of ...