<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>自定义滚动条</title>
<style>
#div1{width:600px;height:30px;background:#360;;position:relative;margin:10px auto;}
#div2{width:30px;height:30px;background:red;position:absolute;left:0;top:0;}
#div3{width:300px;height:300px;border:1px solid black;background:#093;position:relative;overflow:hidden;}
#div4{position:absolute;top:0;color:#fff;font-size:16px;font-family:'仿宋';margin:2px;left:0;padding:4px;}
</style>
<script>
window.onload=function()
{
var oDiv1=document.getElementById('div1');
var oDiv=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
var oDiv4=document.getElementById('div4');
var disX=0;
//div的鼠标按下事件,主要计算鼠标当前位置,和移动位置。这样可以计算出鼠标移动速度。
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event; //为了兼容各种浏览器
disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的位置-div的位置
document.onmousemove=function(ev)
{ //鼠标拖动事件。
var oEvent=ev||event;
var l=oEvent.clientX-disX;
if(l<0) //用户把div丛左边拖出屏幕
{
l=0;
}
else if(l>oDiv1.offsetWidth-oDiv.offsetWidth) //用户把div从右边拖出屏幕
{
l=oDiv1.offsetWidth-oDiv.offsetWidth;
}
oDiv.style.left=l+'px';
var scale=l/(oDiv1.offsetWidth-oDiv.offsetWidth);
document.title=scale;
oDiv4.style.top=-scale*(oDiv4.offsetHeight-oDiv3.offsetHeight)+'px';
};
document.onmouseup=function()
{ //当鼠标抬起后,清掉移动事件。
document.onmousemove=null;
document.onmouseup=null;
};
return false; //阻止默认行为
};
};
</script>
</head>
<body style="height:2000px;background:#ccc;">
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3">
<div id="div4">
在我们面前是迷人的大海
在我们心灵是精彩的世界。我骄傲,因为我有一个美好的青春。
青春,一个被赋予太多憧憬与希望的词汇。在很多人眼里青春如火,燃烧着激情与
活力;青春如花,绽放着智慧和希望。但在我的眼里,青春就如一只迷途的鹿,徘徊在人生
的十字路口,前路是满布的荆棘
青春的路上充满了彷徨。青春的热血在我们的身体中流淌,叛逆的力量在沉默中爆
发。叛逆、嚣张、标新立异···是我们的标识。我们渴望成长,渴望挣脱种种的束缚,却
又羽翼未丰。我们渴望能够独当一面,渴望被认可,却又能力不足。我们有满腔的激情与理
想,可又无法释放。于是,我们纷纷发表独立宣言,希望得到成人世界的认可,我们纷纷反
抗,希望挣脱束缚。我们徘徊在梦想与堕落的边缘,不知路在何方。
迷茫中,蓦然抬头,一群大雁缓缓地飞过。我心中一动,他们不断地迁徙,从南方
飞到北方,
又从北方飞回南方。
这就是信念的力量!
他们为了心中的同一个理想与信念聚集,在一起,
一起排除万难去完成心中的理想。
我们又何尝不是这样?是的,
信念就如一盏明灯,
在我们彷徨的时候照亮我们前进的方向。君不见我们的前途是如此光明和坦荡
、初三,青春年华,我们有梦想与激情!更有初生牛犊不怕虎的勇气!我们敢拼,我
们赢得起!哪怕撞得头破血流又何妨!青春的路上我们绝不彷徨!
</div>
</div>
效果图如下:字随着导航条的滑动而滚动
<audio autoplay="" loop=""><source src="http://www.kugou.com/song/#hash=4F76587A5B0B93EEF15883E54DD3E2DB&album_id=2900867"></audio>
</body>
</html>