诗歌滚动自编 不带鼠标滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>555拽</title>
<style>
*{margin:0;padding:0}
#div1 {width:250px; position:absolute; display:block;left:550px;top:20px; margin:50px 50px;}
#box{
background-color:#CCF;
height:50px;
top:0px;
left:1px;
width:25px;
position:absolute;
Z-index:5555;
}
.scroll-bar{
position:relative;
top:0px;
left:5px;
width: 15px;
height: 200px;
background-color:#FFC;
}
#div2 {width:250px;position:absolute; left:300px;top:20px;margin:50px 50px;}
.scroll-content{position:relative;top:0px;left:0px;width: 200px;}
.scroll-panel{position:relative;background-color:#CFF; top:0px;left:0px;height:200px; overflow:hidden;}
</style>
</head>
<body>
<script>
window.onload=function()
{
var oBox=document.getElementById("box");
var oBar=document.getElementById("scrollbar")
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oContent=document.getElementById('scrollcontent');
oBox.style.cursor = "pointer";
oBox.onmousedown=function(e) {
var d=e||event;
var dY = d.clientY - oBox.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev||event;
var y1=oEvent.clientY-oDiv1.offsetTop-oBox.offsetHeight/2;
var y2=oEvent.clientY-oDiv2.offsetTop-25;
if(y1<=0){
y1=0;y2=0;
}
else if(y1>oBar.offsetHeight-oBox.offsetHeight){
y1=oBar.offsetHeight-oBox.offsetHeight;
y2=oBar.offsetHeight-oBox.offsetHeight;
//alert(oBar.offsetHeight-oContent.offsetHeight)
}
oBox.style.top=y1+'px';
oContent.style.top=-(oContent.offsetHeight-oBar.offsetHeight)*y2/(oBar.offsetHeight-oBox.offsetHeight)+'px';
}
oBox.onmouseup=function()
{document.onmousemove=null; //删除事件
document.onmousedown=null;
};
};
};
</script>
<div id="div1">
<div id="box"></div>
<div class="scroll-bar" id="scrollbar"></div>
</div>
<div id="div2">
<div class="scroll-panel" id="scrollpanel">
<div class="scroll-content" id="scrollcontent">
<pre>
《葬花词》
花谢花飞飞满天，
红消香断有谁怜。
游丝软细飘春榭，
落絮轻粘扑绣窗。
闺中女儿惜春暮，
愁绪满怀无著处。
手把花锄出绣窗，
忍踏落花来复去。
柳丝榆荚自芳菲，
哪管桃飘与李飞。
桃李明年能再发，
明年闺中知有谁。
三月香巢初垒成，
梁间燕子太无情。
明年花发虽可啄，
却不道人去梁空巢已倾。
一年三百六十日，
风刀霜剑严相逼。
明媚鲜妍能几时，
一朝漂泊难寻觅。
花开易见落难寻，
阶前愁煞葬花人。
独把花锄偷洒泪，
洒上空枝见血痕。
杜鹃无语正黄昏，
荷锄归去掩重门。
青灯照壁人初睡，
冷雨敲窗被未温。
怪侬底事倍伤神，
半为怜春半恼春。
怜春忽至恼忽去，
至又无言去不闻。
昨宵亭外悲歌发，
知是花魂与鸟魂。
花魂鸟魂总难留，
鸟自无言花自羞。
愿侬此日生双翼，
随花飞到天尽头。
天尽头，何处有香丘。
未若锦囊收其骨，
一坯净土掩风流。
质本洁来还洁去，
不教污淖陷渠沟。
尔今死去侬收葬，
未卜侬身何日丧。
侬今葬花人笑痴，
他年葬侬知是谁。
试看春残花渐落，
便是红颜老死时。
一朝春尽红颜老，
花落人亡两不知。
</pre>
</div>
</div>
</div>
</body>
</html>
