JS新闻无缝滚动封装函数

手工琥珀三通

手工琥珀三通

2016-02-19 15:52

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是JS新闻无缝滚动封装函数,一起来学习了解下吧!

程序代码

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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://m.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://m.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;}

展开更多 50%)
分享

猜你喜欢

JS新闻无缝滚动封装函数

Web开发
JS新闻无缝滚动封装函数

JS新闻无缝滚动封装函数 取自阿里软件“我是旺想狂”

Web开发
JS新闻无缝滚动封装函数 取自阿里软件“我是旺想狂”

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Javascript Chinaz的不间断滚动新闻函数

Web开发
Javascript Chinaz的不间断滚动新闻函数

JavaScript滚动新闻类

Web开发
JavaScript滚动新闻类

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

js滚动效果

Web开发
js滚动效果

新闻内页-JS分页

Web开发
新闻内页-JS分页

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

C#+Direct3D9.0开发实例之月亮绕着地球转

C#+Direct3D9.0开发实例之月亮绕着地球转

C#中利用正则表达式实现字符串搜索

C#中利用正则表达式实现字符串搜索
下拉加载更多内容 ↓