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

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

<!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. Web四则混合运算

    一.代码1: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  2. C++学习（八）（C语言部分）之 图形库

    有关图形库的学习笔记 1.安装 ww.easys.cn 2.创建win32控制台应用程序 .cpp文件(图形库必须创建cpp文件) *重点 3.安装好后 重启一下vs 图形库 是一些函数的集合 作用是 ...

  3. 20165313 《Java程序设计》第九周学习总结

    教材学习总结 1.URL类 :ava.net包中的URL类是对统一资源定位符的抽象,使用URL创建对象的应用程序称作客户端程序,客户端程序的URL对象调用InputStream openStream( ...

  4. THML文档布局元素

    学习要点:     1.文档元素总汇     2.文档元素解析 一．文档元素总汇     文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念.         元素名称     ...

  5. 【NOI2014】【BZOJ3669】【UOJ#3】魔法森林

    我学会lct辣 原题: 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为 1…n1…n,边标号为1…m1…m.初始时小E ...

  6. win7启动老是自动进入Boot Menu无法进入系统

    如图 进入bios设置 点击startup 选择UEFI/Legacy Boot 那里的Legacy Only选项,选择另一个就会出现这种问题 正常进入系统

  7. MySQL导出用户权限

    在MySQL 5.5/5.6版本中,使用SHOW GRANTS命令可以导出用户的创建脚本和授权脚本. hostname='127.0.0.1' port= username='root' passwo ...

  8. IntelliJ IDEA 快捷键说明大全（中英对照、带图示详解）

    因为觉得网络上的 idea 快捷键不够详尽,所以特别编写了此篇文章,方便大家使用 idea O(∩_∩)O~ 其中的英文说明来自于 idea 的官网资料,中文说明主要来自于自己的领会和理解,英文说明只 ...

  9. unity3d常用组件及分析

  10. RESTful Web API 理解

    REST 是一种应用架构风格,不是一种标准,是面向资源架构(ROA)风格,与具体技术平台无关,REST架构的应用未必建立在Web之上,与之对应的是传统的Web Service 采用的面向操作的RPC架 ...