WEB开发网      婵犵數濞€濞佳囧磹婵犳艾鐤炬い鎰堕檮閸嬬喐銇勯弽銊с€掗梻鍕閺岋箑螣娓氼垱笑闂佽姘﹂褔婀佸┑鐘诧工妤犲憡绂嶉崜褏纾奸弶鍫涘妼缁楁岸鏌熷畡鐗堝殗闁诡喒鏅犲畷褰掝敃閵堝棙顔忔繝鐢靛仦閸ㄥ爼骞愰幘顔肩;闁规崘绉ぐ鎺撳亹闁绘垶锕╁Λ鍕⒑閹肩偛濡奸悗娑掓櫇缁顓兼径妯绘櫇闂佹寧绻傞弻濠囨晝閸屾稓鍘甸柣搴㈢⊕閿氶柣蹇ョ稻缁绘繃绻濋崘銊т紝闂佽鍨伴崯鏉戠暦閻旂⒈鏁傞柛鈾€鏅欑槐妯衡攽閻愬樊鍤熷┑顔藉劤铻為柛鏇ㄥ墯閸欏繘鏌嶉崫鍕櫣缂佲偓婢跺绠鹃柟瀛樼箘閿涘秵顨ラ悙顏勭伈闁诡喖缍婂畷鎯邦槻婵℃彃顭烽弻娑㈠Ω閵夈儺鍔夌紓浣稿€哥粔褰掑极閹剧粯鏅搁柨鐕傛嫹 ---闂傚倷鐒︾€笛兠洪埡鍛闁跨噦鎷�
开发学院网页设计JavaScript JS新闻无缝滚动封装函数 阅读

JS新闻无缝滚动封装函数

 2009-05-07 20:11:31 来源:WEB开发网 闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹闂傚倷绀侀幉锟犲垂閻㈠灚宕查柟鎵閸庡秵銇勯幒鎴濃偓鐢稿磻閹炬枼妲堟繛鍡楃С濞岊亞绱撻崒姘扁枌闁瑰嚖鎷�婵犵數濮幏鍐川椤撴繄鎹曢梻渚€娼уú銈吤洪妸鈺佺劦妞ゆ帊鑳堕埊鏇㈡煏閸モ晛浠х紒杈╁仱閺佹捇鏁撻敓锟�闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹  闂傚倷鑳舵灙缂佺粯顨呴埢宥夊即閵忕姵鐎梺缁樺姇閻忔氨鈧凹鍓熷娲垂椤曞懎鍓伴梺閫炲苯澧紒澶婄秺瀵濡歌閸嬫捇妫冨☉娆忔殘闂佷紮缍€娴滎剟鍩€椤掑倹鏆柛瀣躬瀹曚即寮借閺嗭箓鏌ㄩ悤鍌涘
核心提示:程序代码<script type="text/javascript"><!--//新闻滚动JS代码 (一次滚动高度,速度,停留时间,图层标记)function startmarquee(lh,speed,delay,index){ var t; var p=false;

程序代码

<script type="text/javascript">
<!--
//新闻滚动JS代码 (一次滚动高度,速度,停留时间,图层标记)
function startmarquee(lh,speed,delay,index){
   var t;
   var p=false;
   var o=$("gundongnews"+index);
   o.innerHTML+=o.innerHTML;
   o.onmouSEOver=function(){p=true}
   o.onmouseout=function(){p=false}
   o.scrollTop = 0;
   function start(){
     t=setInterval(scrolling,speed);
     if(!p) o.scrollTop += 2;
   }
   function scrolling(){
     if(o.scrollTop%lh!=0){
       o.scrollTop += 2;
       if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
     }
     else{
     clearInterval(t);
     setTimeout(start,delay);
     }
   }
   setTimeout(start,delay);
}
//-->
</script>

调用举例:


 程序代码

<div id="other">
<ul id="gundongnews0">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<script language="Javascript" type="text/javascript">startmarquee(18,30,3000,0); </script>

20090129 还需要定义样式:


 程序代码

/* 滚动文字 */
#other{ float:left; height: 18px; line-height:18px; padding:3px 0; width: 100%; margin:0; overflow: hidden;}
#gundongnews0,#gundongnews0 li{ clear:both; color:#FF6600; padding: 0px;height: 18px;overflow: hidden; line-height:18px }
#gundongnews0 a{ color:#FF6600;}

Tags:JS 新闻 无缝

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接