get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是JS新闻无缝滚动封装函数,一起来学习了解下吧!
【 tulaoshi.com - Web开发 】
程序代码
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
调用举例:
程序代码
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)div id="other"
ul id="gundongnews0"
li1/li
li1/li
li1/li
/ul
/div
script language="JavaScript" type="text/javascript"startmarquee(18,30,3000,0); /script
20090129 还需要定义样式:
程序代码
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)/* 滚动文字 */
#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;}
来源:http://www.tulaoshi.com/n/20160219/1610598.html
看过《JS新闻无缝滚动封装函数》的人还看了以下文章 更多>>