当前位置: 电脑软硬件应用网 > 设计学院 > 网页特效 > 正文
JS特效代码:实现间歇无缝文字滚动特效
JS特效代码:实现间歇无缝文字滚动特效
2009-10-19 11:59:27  文/ymyang   出处:蓝色理想   

处理页面中的间歇无缝滚动新闻的时候,最常见的方法就是将滚动区内容复制追加一份,然后通过控制和判断滚动块的scrollTop来实现滚动停止效果。

其实在很多情况下通过节点操作实现间歇无缝滚动要更加容易些。

代码如下:

<script language="javascript" type="text/javascript">
window.onload=function(){
    var o=document.getElementById('box');
    window.setInterval(function(){scrollup(o,24,0);},3000);
}
///滚动主方法
///参数:o 滚动块对象
///参数:d 每次滚屏高度
///参数:c 当前已滚动高度
function scrollup(o,d,c){
    if(d==c){
        var t=getFirstChild(o.firstChild).cloneNode(true);
        o.removeChild(getFirstChild(o.firstChild));
        o.appendChild(t);
        t.style.marginTop="0px";
    }else{
        c+=2;
        getFirstChild(o.firstChild).style.marginTop=-c+"px";
        window.setTimeout(function(){scrollup(o,d,c)},20);
    }
}
//解决firefox下会将空格回车作为节点的问题
function getFirstChild(node){
  while (node.nodeType!=1)
  {
         node=node.nextSibling;
  }
  return node;
}
</script>
<ul id="box">
    <li>· 新华每日电讯:音乐版权收费像“一团麻” </li>
    <li>· 现代快报:人类能否和机器人结婚生孩子? </li>
    <li>· 环球:美国,一家亿万富翁俱乐部的破产 </li>
    <li>· 现代快报:为让媒体封口倪震欲卖李嘉欣情书 </li>
    <li>· 京华时报:北京航空航天大学学生自制火箭升天 </li>   
</ul>

效果:

运行代码框
<style type="text/css">
<!--
*{ margin:0px; padding:0px;}
#box{width:300px; height:24px;overflow:hidden; font-size:12px; background:#efefef;}
#box li{ list-style:none; line-height:24px;}
-->
</style>
<script language="javascript" type="text/javascript">
window.onload=function(){
var o=document.getElementById('box');
window.setInterval(function(){scrollup(o,24,0);},3000);
}
function scrollup(o,d,c){
if(d==c){
var t=getFirstChild(o.firstChild).cloneNode(true);
o.removeChild(getFirstChild(o.firstChild));
o.appendChild(t);
t.style.marginTop="0px";
}else{
c+=2;
getFirstChild(o.firstChild).style.marginTop=-c+"px";
window.setTimeout(function(){scrollup(o,d,c)},20);
}
}
function getFirstChild(node){
while (node.nodeType!=1)
{
node=node.nextSibling;
}
return node;
}
</script>
<ul id="box">
<li>· 新华每日电讯:音乐版权收费像“一团麻” </li>
<li>· 现代快报:人类能否和机器人结婚生孩子? </li>
<li>· 环球:美国,一家亿万富翁俱乐部的破产 </li>
<li>· 现代快报:为让媒体封口倪震欲卖李嘉欣情书 </li>
<li>· 京华时报:北京航空航天大学学生自制火箭升天 </li>
</ul>

  • 上一篇文章:

  • 下一篇文章:
  • 最新热点 最新推荐 相关文章
    网页特效代码:仿京东的商品分类导航…
    不能屏蔽的网页右下角窗口特效
    装载页面进度条代码
    链接特效之js做引用文章链接代码
    左右移动转换文字特效HTML代码解析
    网页页面实现自动刷新的3种代码
    网页特效代码:纯css下拉菜单列表
    文字滚动特效(兼容多浏览器)
    网页特效代码:JavaScript显示系统时…
    网页中的弹出窗口居中背景半透明
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号