滑动条控制页面内容

来源：互联网发布：性能测试书籍推荐知乎编辑：程序博客网时间：2024/06/07 12:23

1、与之前所做的拖拽原理相似，只不过去掉了Y方向的拖动。
2、在关于滑块在滑动条的位置确定时一定要记得不要被样式居中给迷惑了位置，

if (l<0) {                        l=0;                    } else if (l>oParent.offsetWidth-oDiv.offsetWidth) {                        l=oParent.offsetWidth-oDiv.offsetWidth;                    }

要按照正常的方式进行取值！！！
3、关于比例取值，要按照滑块移动的距离和总长度进行比较
var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);
4、为了保证页面美观，将空白处减去即可，还有页面根据比例移动的方向是负值时，才能达到滑动条控制页面内容的效果：
oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+’px’；

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>滑动条控制页面内容</title>    <style>        #parent        {            width: 400px;            height: 30px;            position: relative;            background: #63FFEE;            margin: 10px auto;        }        #div1        {            width: 30px;            height: 30px;            position: absolute;            background: #ED0040;        }        #div2        {            width: 300px;            height: 300px;            left: 0;            top: 0;            position: relative;            overflow: hidden;            background: #CCC;            border: 2px black dashed;        }        #div3        {            position: absolute;            left: 0;            top: 0;        }    </style>    <script>        window.onload=function()        {            var oParent = document.getElementById('parent');            var oDiv = document.getElementById('div1');            var oDiv2 = document.getElementById('div2');            var oDiv3 = document.getElementById('div3');            var disX=null;            oDiv.onmousedown=function(ev)            {                var oEvent=ev||event;                disX=oEvent.clientX-oDiv.offsetLeft;                document.onmousemove=function(ev)                {                    var oEvent=ev||event;                    var l=oEvent.clientX-disX;                    if (l<0) {                        l=0;                    } else if (l>oParent.offsetWidth-oDiv.offsetWidth) {                        l=oParent.offsetWidth-oDiv.offsetWidth;                    }                    oDiv.style.left = l+'px';                    var scale=l/(oParent.offsetWidth-oDiv.offsetWidth);                    document.title=scale;                    oDiv3.style.top=-scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';                };                document.onmouseup=function()                {                    document.onmousedown=null;                    document.onmousemove=null;                };                return false;            };        };    </script></head><body>    <div id="parent">        <div id="div1"></div>    </div>    <div id="div2">        <div id="div3">中青在线北京7月26日电 从7月初起，我国出现“大范围持续性”高温天气，进入“高烤”时间。中央气象台7月7日开始发布高温预警，截至7月25日已连续发布预警19天。那么，此轮高温天气为何持续时间如此之长、强度如此之强，其背后究竟是啥在作怪，近期海上生成的台风是否又会对高温天气有一定缓解？记者就此采访了中国气象局相关专家。（1）全国97个县市最高气温达到或超过40℃，江浙沪地区尤为明显</div>    </div></body></html>

阅读全文

0 0