首页 > 代码库 > 自定义滚动条——控制文字的滚动
自定义滚动条——控制文字的滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#big {
height: 20px;
width: 600px;
background-color: gray;
position: relative;
margin: 100px auto;
}
#small {
height: 20px;
width: 20px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
#side {
width: 200px;
height: 400px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
#text {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="big">
<div id="small">
</div>
</div>
<div id="side">
<div id="text">
女:戴上它! 男:不戴比较爽. 女:戴了安全点. 男:相信我的技术. 女:不戴就不让你上. 男:不戴才像男子汉.
女:你烦不烦!骑摩托车戴安全帽会死啊? 蝴蝶飞过沙漠 21:13:43 鸡跟牛发牢骚:"人类让我们多下蛋,自
己却计划生育,太不公平了."牛说:"你那点委屈算什么,那么多人吃我的奶,但没有人管我叫妈. 蝴蝶
飞过沙漠 21:13:55 几只猴子偷看一男人洗澡.突然一只猴子笑得掉下树来,问它为什么笑?它说:人类真奇怪,尾巴那么
短,还好意思放在前面!笑死我啦! 蝴蝶飞过沙漠 21:14:12 从前一家穷人,儿子结婚时,他妈没钱为他买内裤,就用米
袋帮他做了条内裤.结婚之夜脱下外裤,老婆当场晕倒.内裤前面写着:净重25公斤！ 蝴蝶飞过沙漠 21:14:4
4 刚一个挺漂亮的年轻妈妈带着她儿子在这里照相，然后念出了石头上的字：海誓山盟。她儿子问她是什么意
思，我赶紧靠近了偷听，觉得她应该会给她儿子讲一个特别棒的爱情故事，然后就听她给她儿子解释：意思
就是小孩子要永远听妈妈的话 一手拿着三星，一手拿着苹果。走在路上就好像拿了一个炸弹和一个盾。 坡坡
19:10:06 蝴蝶飞过沙漠 19:11:17 健身房，一身穿健身服的妙龄少女踏上跑步机，我以为她准备挥汗如雨，谁知
她拿出一支保湿喷雾器对着脸、手、胸，一阵狂喷，接着拿出手机对着身上的水珠，嘟着嘴开始自拍，然后盆
友圈发条消息，拿上毛巾就走了…… 坡坡 19:11:35 woqu 蝴蝶飞过沙漠 19:16:49 不是抱一抱，亲一亲，改个情侣
网名，换个情侣头像，就是情侣了。真正的情侣是一同经历好多坎坷，还依旧说爱你的人。 蝴蝶飞过沙漠 19:19:4
0 女人的奋斗目标就该是，让以前的男人遗憾，让现在的男人流汗，让未来的男人稀罕。 蝴蝶飞过沙漠 19:20:12 这个
我喜欢 雪花纷飞像首诗，柔情美妙画中意。 洒向人间都是情，默默吟唱颂友谊。 风吹雪花舞蹈起，奏响生活
幸福溢。 瑞雪飘飞兆丰年，美满人间皆美丽。 牵挂问候全亲上，愿你天天被我亲！
</div>
</div>
</body>
<script type="text/javascript">
//滚动条控制文字的滚动
var big = document.getElementById("big");
var small = document.getElementById("small");
var side = document.getElementById("side");
var txt = document.getElementById("text");
var x = 0;
var y = 0;
small.onmousedown = function(ev) {
var oEvent = ev || event;
x = oEvent.clientX - small.offsetLeft;
document.onmousemove = function(ev) {
var oEvent = ev || event;
var Left = oEvent.clientX - x;
if(Left < 0) {
Left = 0;
} else if(Left > big.offsetWidth - small.offsetWidth) {
Left = big.offsetWidth - small.offsetWidth;
}
small.style.left = Left + "px";
//自定义一个变量scale
//表示滚动条滚动的距离和滚动条可以滚动的最大距离的的比
var scale = Left / (big.offsetWidth - small.offsetWidth);
//document.title = scale;
//控制文字的滚动
txt.style.top = -(txt.offsetHeight - side.offsetHeight) * scale + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
</script>
</html>
自定义滚动条——控制文字的滚动