两组文字同时定时向上翻滚效果

2个月前 (03-06 20:28)阅读42回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4189
  • 级别管理员
  • 主题837
  • 回复2
楼主

文字向上滚动js特效代码,两组文字定时向上滚动切换显示,根据自己的需求来自定义滚动速度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>两组文字同时定时向上翻滚效果_武鸣人</title>
<style type="text/css">
p{margin:0;padding:0}
.abc{float:left;font-size:12px;width:230px;height:70px;overflow:hidden; }
.efg{float:left;font-size:12px;width:230px;height:168px;overflow:hidden; }
</style>
<script language="javascript" type="text/javascript">
window.onload=function(){
    var o=document.getElementById('box');
    var o2=document.getElementById('box2');
    window.setInterval(function(){scrollup(o,24,0);scrollup(o2,24,0)},3000)
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
///滚动主方法
///参数: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);
    }
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
//解决firefox下会将空格回车作为节点的问题
function getFirstChild(node){
  while (node.nodeType!=1)
  {
         node=node.nextSibling;
  }
  return node;
}
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="abc">
 <div class="abc-box" id="box">
 <div class="www_wuming_ren">
 <p class="tit1">1.[狐魅小小]</p>                
 <p class="tit2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">2.[狐魅小小]</p>                
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">3.[狐魅小小]</p>                
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">4.[狐魅小小]</p>                
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">5.[狐魅小小]</p>                
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">6.[狐魅小小]</p>                
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 </div>
</div>
<br />
<div class="efg">
 <div class="efg-box"  id="box2">
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">1幸运大奖</p>                
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">2幸运大奖</p>                
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">3幸运大奖</p>               
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">4幸运大奖</p>                
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">5幸运大奖</p>              
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">6幸运大奖</p>              
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">7幸运大奖</p>              
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">8幸运大奖</p>                
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">9幸运大奖</p>              
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">10幸运大奖</p>               
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">11幸运大奖</p>               
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 <div class="www_wuming_ren">
 <p class="wuming_ren_1">12幸运大奖</p>               
 <p class="wuming_ren_2">幸运的获得:[苹果IPAD一部黑色鸢尾]</p>
 </div>
 </div>
</div>
</body>
</html>


0
0
收藏0
回帖

两组文字同时定时向上翻滚效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息