日期:2014-05-16  浏览次数:20381 次

js滚动效果

<html>
?? ?<head>
<script type="text/javascript">
?? ??? ?// Copyright: hc360.com
// Author: Dakular
// Useage: HCmarquee(滚动对象id, 可见范围宽度, 可见范围高度, 滚动条数, 可见条数, 滚动速度, 停留时间, 方向); 方向有left和up两种
function HCmarquee(id,mw,mh,mr,sr,ms,pause){
?? ?
?? ?var obj=document.getElementById(id);
?? ?obj.ss=false; //stop tag
?? ?obj.mr=mr; //marquee rows
?? ?obj.sr=sr; //marquee display rows
?? ?obj.mw=mw; //marquee width
?? ?obj.mh=mh; //marquee height
?? ?obj.ms=ms; //marquee speed
?? ?obj.pause=pause; //pause time
?? ?obj.pt=0; //pre top
?? ?obj.st=0; //stop time
?? ?obj.mul=1;
?? ?obj.con="";
?? ?with(obj){
?? ??? ?style.width=mw+"px";
?? ??? ?style.height=mh+"px";
?? ??? ?noWrap=false;
?? ??? ?onmouseover=stopm;
?? ??? ?onmouseout=startm;
?? ??? ?scrollTop=0+"px";
?? ??? ?scrollLeft=0+"px";
?? ?}

?? ?if(obj.mr!=1){
?? ??? ??? ??? ?obj.tt=mh*mr/sr;
?? ??? ??? ??? ?obj.ct=mh; //current top
?? ??? ??? ??? ?obj.innerHTML+=obj.innerHTML;
?? ??? ??? ??? ?setInterval(scrollUp,obj.ms);
?? ?}
?? ?function scrollUp(){
?? ??? ?if(obj.ss==true) return;
?? ??? ?obj.ct+=1;
?? ??? ?if(obj.ct==obj.mh+1){
?? ??? ??? ?obj.st+=1; obj.ct-=1;
?? ??? ??? ?if(obj.st==(obj.pause*obj.mul)){
?? ??? ??? ??? ?obj.ct=0; obj.st=0;
?? ??? ??? ??? ?if(obj.mul==1) obj.mul = 1;
?? ??? ??? ??? ?else obj.mul = 1;
?? ??? ??? ?}
?? ??? ?}else {
?? ??? ??? ?obj.pt=(++obj.scrollTop);
?? ??? ??? ?if(obj.pt==obj.tt){obj.scrollTop=0;}
?? ??? ?}
?? ?}

?? ?function stopm(){obj.ss=true;}
?? ?function startm(){obj.ss=false;}
?? ?
}

</script>
?? ?</head>
?? ?<body>
?? ??? ?<div id="MarqueeInfo" style="height:21px;line-height:21px;
overflow:hidden;
text-align:left;
width:223px;">ssssssssssssssssssssssssssssss<br>sssssssssdddddddddddddddddddddddffffffffffff<br>fffffffffffffdddddddddddddddwwwwwwwwwwwwsssssssssssssss<br>ssssseeeeeeeeeeeeeeeerrrrrrrrrrr</div>

?? ??? ?<script type="text/javascript">
?? ??? ??? ? HCmarquee("MarqueeInfo",223,21,5,1,10,198);
?? ??? ?</script>
?? ?</body>
</html>