您的位置：首页 > Web前端 > JavaScript

javascript內容向上不間斷滾動

2016-07-26 20:02 387 查看

<!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>upRoll</title>
</head>

<body>

<style type="text/css">
body{margin:0px auto; padding:0px;}
ul,li{margin:0px; padding:0px;list-style:none;}
.scroll_div {width:180px; height:109px; border:1px solid #96C; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div div{ height:110px;}
</style>
<!--#####滚动区_begin域#####-->
<div style="text-align:center">
<div id="scroll_div" class="scroll_div">
<div>
<ul>
<li>aaaaaaaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbbbbb</li>
<li>ccccccccccccccccccccc</li>
<li>ddddddddddddddddddddd</li>
<li>eeeeeeeeeeeeeeeeeeeee</li>
<li>fffffffffffffffffffff</li>
</ul>
</div>
<div></div>
</div>
</div>

<div style="height:10px;"></div>

<div style="text-align:center">
<div id="scroll_diy" class="scroll_div">
<div>
<ul>
<li>ggggggggggggggggggggg</li>
<li>hhhhhhhhhhhhhhhhhhhhh</li>
<li>iiiiiiiiiiiiiiiiiiiii</li>
<li>jjjjjjjjjjjjjjjjjjjjj</li>
<li>kkkkkkkkkkkkkkkkkkkkk</li>
<li>lllllllllllllllllllll</li>
</ul>
</div>
<div></div>
</div>
</div>
<!--#####滚动区域_end#####-->
<script type="text/javascript">
function upRoll(obj,myMar,speed){
var scroll_obj = document.getElementById(obj);
var scroll_beg = scroll_obj.getElementsByTagName('div').item(0);
var scroll_end = scroll_obj.getElementsByTagName('div').item(1);
scroll_end.innerHTML = scroll_beg.innerHTML;
var marquee = function(){
if(scroll_end.offsetHeight - scroll_obj.scrollTop <= 0 ){
scroll_obj.scrollTop -= scroll_beg.offsetHeight;
}else{
scroll_obj.scrollTop++;
}
}
myMar = setInterval(marquee,speed);
scroll_obj.onmouseover = function(){clearInterval(myMar);}
scroll_obj.onmouseout  = function(){myMar = setInterval(marquee,speed);}
}
upRoll('scroll_div','sd',50);
upRoll('scroll_diy','se',20);
</script>

</body>

</html>

寫法2

function faqDTScroll(id,w,n){
var box=document.getElementById(id),can=true,w=w||100,fq=fq||10,n=n==-1?-1:1;
box.innerHTML  += box.innerHTML;
box.onmouseover = function(){can=false};
box.onmouseout  = function(){can=true};
var max = parseInt(box.scrollHeight/2);
new function (){
var stop = box.scrollTop%20==0&&!can;
if(!stop){
var set = n > 0 ? [max,0] : [0,max];
box.scrollTop==set[0]?box.scrollTop=set[1]:box.scrollTop+=n;
};
setTimeout(arguments.callee,box.scrollTop%20?fq:w);
};
}
faqDTScroll('dtscrollID',2000);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航