您的位置：首页 > 其它

轻松实现内容的无缝平滑滚动

2007-08-13 15:14 337 查看
轻松实现内容的无缝平滑滚动
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>无缝滚动代码示例</title>
6 <style>
7 a{}{display:block;font-size:15px};
8 </style>
9 <SCRIPT LANGUAGE="JavaScript">
10 <!--
11 function scrolln(){
12 objDiv.scrollTop+=1;
13
14 if (objDiv.scrollTop>20) {
15 objDiv.scrollTop=0;
16
17 do{
18 var objChild=objDiv.firstChild;
19 objDiv.removeChild(objChild);
20 objDiv.appendChild(objChild);
21 }while(!objChild.innerHTML)
22 }
23 }
24 //-->
25 </SCRIPT>
26 </head>
27 <body>
28 <div id="divMain" style="width:300px;height:68px;overflow:hidden;line-height:20px">
29 <a href="http://www.livebaby.cn/blog">《戒子篇》-- 诸葛亮</a><br>
30 <a href="http://www.livebaby.cn/blog">夫君子之行，静以修身，俭以养德。</a><br>
31 <a href="http://www.livebaby.cn/blog">非澹泊无以明志，非宁静无以致远。</a><br>
32 <a href="http://www.livebaby.cn/blog">夫学须静也，才须学也，</a><br>
33 <a href="http://www.livebaby.cn/blog">非学无以广才，非志无以成学，</a><br>
34 <a href="http://www.livebaby.cn/blog">淫漫则不能励精，险躁则不能治性，</a><br>
35 <a href="http://www.livebaby.cn/blog">年与时驰，意与日去，</a><br>
36 <a href="http://www.livebaby.cn/blog">遂成枯落，多不接世，</a><br>
37 <a href="http://www.livebaby.cn/blog">悲守穷庐，将复何及!</a><br>
38 <a href="http://www.livebaby.cn/blog">www.livebaby.cn/blog</a><br>
39 </div>
40 <div id="divS"></div>
41 <script>
42 var tmp=setInterval("scrolln()",100);
43 var objDiv=document.getElementById("divMain");
44 objDiv.onmouseover=function(){clearInterval(tmp)}
45 objDiv.onmouseout=function(){tmp=setInterval("scrolln()",100)}
46 </script>
47 </body>
48 </html>
49
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航