原生JS实现拖拽进度条、滚动鼠标显示相应的内容

发布于

今天要分享的是运用原生JS实现拖拽进度条、滚动鼠标显示相应的内容，实现效果如下：

以下是代码实现，欢迎大家复制粘贴。

代码语言：javascript
复制
<!DOCTYPE html>
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>原生JS实现拖拽进度条、滚动鼠标显示相应的内容</title>

<style>

#parent {

width: 400px;

height: 20px;

background: #CCC;

position: relative;

margin: 20px auto;

}


    #div1 {
        width: 20px;
        height: 20px;
        background: red;
        cursor: pointer;
        position: absolute;
    }

    #div2 {
        width: 200px;
        height: 300px;
        margin: 0 auto;
        border: 1px solid black;
        position: relative;
        overflow: hidden;
    }

    #div3 {
        position: absolute;
    }
&lt;/style&gt;

&lt;script&gt;

    function myAddEvent(obj, sEvent, fn) {
        //针对IE浏览器
        if (obj.attachEvent) {

            obj.attachEvent(&#39;on&#39; + sEvent, fn);

            //针对火狐 和Chrome浏览器
        } else {

            //DOM事件只能通过addEventListener来添加
            obj.addEventListener(sEvent, fn, false);
        }
    }

    window.onload = function () {

        var oDiv = document.getElementById(&#39;div1&#39;);
        var oParent = document.getElementById(&#39;parent&#39;);
        var oDiv2 = document.getElementById(&#39;div2&#39;);
        var oDiv3 = document.getElementById(&#39;div3&#39;);

        //鼠标滚动时
        function onMouseWheel(ev) {
            //一切事件的详细信息都包括在事件对象里面
            var oEvent = ev || event;

            //处理兼容性，记录上向上滚的还是向下滚的
            var bDown = true;

            //wheelDelta IE下独有的
            //oEvent.detail Firefox下的

            //当滚动距离小于0时为false，大于0时为true
            bDown = oEvent.wheelDelta ? oEvent.wheelDelta &lt; 0 : oEvent.detail &gt; 0;

            if (bDown) {
                //让Div的left值加10
                setLeft(oDiv.offsetLeft + 10);

            } else {
                //让Div的left值减10
                setLeft(oDiv.offsetLeft - 10);
            }

            //针对Firefox下阻止事件默认,防止滚动时DIV和页面滚动一起发生变化
            if (oEvent.preventDefault) {

                oEvent.preventDefault();
            }

            //针对IE和Chrome下阻止默认,防止滚动时DIV和页面滚动一起发生变化
            return false;
        }

        //IE      attach  mousewheel
        //FF      add     DOMMouseScroll
        //Chrome  add     mousewheel
        //基于以上情况，用兼容性方法添加事件(滑块上滚动)
        myAddEvent(oParent, &#39;mousewheel&#39;, onMouseWheel);
        myAddEvent(oParent, &#39;DOMMouseScroll&#39;, onMouseWheel);

        //基于以上情况，用兼容性方法添加事件(内容上滚动)
        myAddEvent(oDiv2, &#39;mousewheel&#39;, onMouseWheel);
        myAddEvent(oDiv2, &#39;DOMMouseScroll&#39;, onMouseWheel);

        //鼠标按下时
        oDiv.onmousedown = function (ev) {

            var oEvent = ev || event;

            var disX = oEvent.clientX - oDiv.offsetLeft;

            //鼠标移动时
            document.onmousemove = function (ev) {

                var oEvent = ev || event;

                var l = oEvent.clientX - disX;

                setLeft(l);
            };
            //鼠标抬起时
            document.onmouseup = function () {

                document.onmousemove = null;
                document.onmouseup = null;
            };
        };

        //设置滑块的left值
        function setLeft(l) {
            //限制范围
            if (l &lt; 0) {

                l = 0;

            } else if (l &gt; oParent.offsetWidth - oDiv.offsetWidth) {

                l = oParent.offsetWidth - oDiv.offsetWidth;
            }

            oDiv.style.left = l + &#39;px&#39;;

            //计算滚动距离相对滚动范围的比例
            var scale = l / (oParent.offsetWidth - oDiv.offsetWidth);

            //让Div3随着滚动的距离上下滑动显示内容
            oDiv3.style.top = -(oDiv3.offsetHeight - oDiv2.offsetHeight) * scale + &#39;px&#39;;

        }
    };
&lt;/script&gt;



</head>


<body>

<div id="parent">

<div id="div1"></div>

</div>

<div id="div2">

<div id="div3">


        关于我们

        我们是一支独具特色的IT培训团队，反对传统IT教育枯燥
        乏味的教学模式，提供一种全新的快乐学习方法！

        目前主要针对的是javascript培训，同时还提供了css教程、javascript
        视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服
        务，同时还为处于javascript入门阶段的朋友录制了大量javascript视
        频，其中涉及了大量javascript基础知识，希望我们推出的javascript
        网络培训课程能带给大家更多惊喜。

        关于讲师：

        我们的讲师来自中国最具吸引力的IT企业，如淘宝、ShopEx等。
        前端开发讲师：Leo WEB 前端开发工程师(5年)、CSS 精品课
        程讲师(3年)，公司创始人；曾任北京科尔威视、ShopEx 北京营
        销中心 ECMall 项目前端架构师；精通 XHTML+CSS 架构，深刻理解
        W3C 标准，熟练掌握系统的浏览器兼容性解决方案，擅长大型网站前
        端架构及调试各类页面错位等诸多兼容性问题的疑难杂症；专注于网站
        用户体验性研究，并在视频、电子商城、教育平台、企业级应用站点拥
        有数量庞大的案例和多年实战经验；
    &lt;/div&gt;
&lt;/div&gt;



</html>

#拖拽