网页编程网
www.youkud.com
掌握计算机、网络技术，让生活更美好！
主页
网页制作
html5
JavaScript
DIV+CSS
前端美工
网络编程
Java与JSP
PHP
Python 3
Golang
数据库
Mysql
Oracle
NoSQL
SQLite
运维
Linux
正则表达式
架构
网页特效
移动开发
网络
SDN
QUIC
网络原理
人工智能
强化学习
机器学习
区块链
区块链1
区块2
dapp
理论
dapp案例
数据采集
爬虫技术
爬虫案例
当前位置：
主页
>>
网页特效
>> 正文
纯js两组文字定时向上滚动特效
阅读：3657 输入：2016-08-24 09:30:06
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <title>两组文字定时向上滚动特效</title> <style type="text/css"> p{margin:0;padding:0} .js{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) } ///滚动主方法 ///参数: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> </head> <body> <div class="js"> <div class="abc-box" id="box"> <div class="jplb"> <p class="tit1">1.[狐魅小小]</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">2.[狐魅小小]</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">3.[狐魅小小]</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">4.[狐魅小小]</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">5.[狐魅小小]</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">6.[狐魅小小]</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> </div> </div> <!--====大奖榜==== End--> <br /> <!--====幸运榜 Start====--> <div class="efg"> <div class="efg-box" id="box2"> <div class="jplb"> <p class="tit1">1幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">2幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">3幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">4幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">5幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">6幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">7幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">8幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">9幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">10幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">11幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> <div class="jplb"> <p class="tit1">12幸运大奖</p> <p class="tit2">幸运的获得：[苹果IPAD一部黑色鸢尾]</p> </div> </div> </div> </body> </html>
上一篇：
带关闭功能全屏漂浮广告图片
下一篇：
div内文字绝对居中css代码
相关阅读
js文字定时向上滚动特效代码
js实现公告文字标题无缝向上滚动特效
js实现文字内容向上滚动效果
下载专区
软件下载（提取码：mtag）
Tag
网站Tag
标签云
HTML工具
进制间转换
进制转换（带小数）
html代码运行
HTML工具
字母翻转
硬盘整数分区
html颜色代码
HTML工具
除空格回车
万年历
fojiao
HTML工具
小游戏
在线绘画
更多
手机版
联系微信:jingqishens