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

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

<!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. HDU 4642 Fliping game （简单博弈）

    Fliping game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  2. （15）javaScript入门

    什么是javaScript HTML用来做页面的架构,CSS用来做页面样式的布局 javaScript就是用来完成页面用户交互的,JS写的就是叫脚本 js就是弱语言类型,不同类型的时候可以相互转换 j ...

  3. 【BZOJ2427】【HAOI2010】软件安装

    无力吐槽…… 原题: 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得这些软件的价值尽可能大(即Vi的和最 ...

  4. svelte 构建快速web 应用的工具

    svelte 和angular vue reat 类似,都是方便快速的创建用户界面,最大不同的地方是svelte 转换你的app 是在构建时,而不是运行时,所以好处就是不用花费太多的操作在,框架的 抽 ...

  5. tailor multi fragment && cutom-amd script demo 说明

    tailor 官方demo 中提供了一个multi fragment 的demo,这个比较简单,就是使用不同的 后端server 做为fragment ,然后使用 html tag 进行加载就可以了. ...

  6. 使用kubebapps 管理helm 仓库已经应用使用Monocular专门提供helm 仓库查找

    Monocular 从1.0 开始专注于helm 的UI展示,对于部署以及维护已经去掉了,官方也提供了相关的说明以及 推荐了几个可选的部署工具,从使用以及架构上来说kubeapps 就是Monocul ...

  7. php编译GD库 JPEG Support

    Fatal error: Call to undefined function imagecreatefromjpeg() http://chen498402552-163-com.iteye.com ...

  8. FastAdmin 生产环境升级注意

    FastAdmin 生产环境升级注意 列出 FastAdmin 实际生产中升级注意事项. 安全相关,看 FastAdmin 的资讯. 如果使用 Git 更新生产文件,注意更新后的权限. JS 修改后注 ...

  9. Jmeter -- HTTP Request Defaults HTTP请求默认值

    一.HTTP Request Defaults的作用: 该组件可以为我们的http请求设置默认的值.假如,我们创建一个测试计划有很多个请求且都是发送到相同的server,这时我们只需添加一个Http ...

  10. 使用spark streaming报错ERROR DFSClient: Failed to close inode xxxx

    转载自:http://blog.csdn.net/xiaolixiaoyi/article/details/45875101 好几个Spark streaming的程序同时运行,发现spark报出了如 ...