您的位置：首页 > Web前端 > JavaScript

js-实现文字无缝滚动（停顿+缓动）

2012-07-12 17:03 567 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<base target="_blank" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style type="text/css">
*{padding:0;margin:0;font-size:12px;}
#box{width:800px;height:200px;margin:0 auto;overflow:hidden;position:relative;}
#ul_box{list-style:none;position:absolute;top:0;}
#ul_box span{color:white;}
#ul_box li{line-height:20px;background-color:black;vertical-align:top;overflow:hidden;}
#ul_box p{width:400px;float:left;display:inline;color:gray}
</style>
<script type="text/javascript" src="stop.js"></script>
<script type="text/javascript">
<!--
function $(obj){return document.getElementById(obj)}
function getClass(obj,attr){
var aArray=[];
var i=0;
var aAll=obj.getElementsByTagName('*');
for(i=0;i<aAll.length;i++){
if(aAll[i].className == attr){
aArray.push(aAll[i])
}
}
return aArray;
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn){
clearInterval(obj.oTime);
obj.oTime=setInterval(function(){
var bStop=true;
for(var ii in json){
var oStyle=null;
if(ii == 'opacity'){
oStyle=parseInt(parseFloat(getStyle(obj,ii))*100);
}
else{
oStyle=parseInt(getStyle(obj,ii));
}
var iSpeed=(json[ii]-oStyle)/8;
iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(oStyle != json[ii]){
bStop=false;
}
if(ii=='opacity'){
obj.style.opacity=(oStyle+iSpeed)/100;
obj.style.filter='alpha(opacity=='+(oStyle+iSpeed)+')';
}
else{
obj.style[ii]=oStyle+iSpeed+'px'
}
}
if(bStop){
clearInterval(obj.oTime);
if(fn){
fn();
}
}
},30)
}
window.onload=function(){
var oBox=$('ul_box');
var oLi=oBox.getElementsByTagName('li');
var iLi=[];
var iHeight=null;
var oTime=null;
var nHeight=null;
var i=j=0;
for(i=0;i<oLi.length;i++){
iLi.push(-oLi[i].offsetHeight);
}
oBox.innerHTML +=oBox.innerHTML;
doMove();
function doMove(){
clearInterval(oTime);
oTime=setInterval(function(){
nHeight+=iLi[j];
if(oBox.offsetTop == -(oBox.offsetHeight/2)){
oBox.style.top=0;
}
else{
startMove(oBox,{top:nHeight})
}
j++;
if(j>iLi.length){
j=1;
nHeight=iLi[0];
startMove(oBox,{top:nHeight})
}

},2000)
}
$('box').onmouseover=function(){
clearInterval(oTime);
}
$('box').onmouseout=function(){
doMove();
}
}
//-->
</script>
</head>
<body>
<div id="box">
<ul id="ul_box">
<li style="background:red"><p><span>潇潇雨兮:</span>原来客户端可以下载这么快的</p><p><span>万剑归宗:</span>刚下载，进去玩玩，画面还不错</p></li>
<li><p><span>卡门:</span>玩过一段日子，没见过盗号和挂机，很安全的游戏</p><p><span>小小酥:</span>还是我家古仔代言的，品质肯定不错！</p></li>
<li><p><span>如果爱:</span>送的礼包很实惠，安安心心上手无难度</p><p><span>小宝:</span>昨晚终于灭了烈火，激动中，希望有一天能够爆掉他的坐骑，那个拉风啊</p></li>
<li><p><span>猫仙人:</span>玩得很自在</p><p><span>希尔瓦娜斯:</span>试了，不错，在国内算是武侠版的魔兽了吧</p></li>
<li><p><span>丁香花:</span>昙花一现，只为你倾城一笑</p><p><span>奥斯卡:</span>俺就冲着古天乐代言来了</p></li>
<li><p><span>一顾永恒:</span>一花一世界，一佛一菩提；一剑荡乾坤，一刀平天下，弯弓射天狼，四海皆纵横。</p><p><span>风间苍月:</span>唯愿此生，如云自在，醉卧有你们的风景。</p></li>
<li><p><span>普度众生:</span>这游戏目测可以秒杀一群国内网游</p><p><span>歼灭天使:</span>祝福我游戏里的伙伴们 你们一定要记得比我幸福</p></li>
<li><p><span>ailaner:</span>画面感觉都不错，上手也很简单</p><p><span>弥撒弥撒:</span>PK超级给力，痛快！</p></li>
<li><p><span>阿尔托利亚:</span>一直以来都在玩，还在游戏里认识了不少朋友</p><p><span>lancer:</span>2D的人物搭配3D的背景，就算是低配电脑也能享受高画质</p></li>
<li><p><span>幸运E:</span>帮战城战打起来真刺激，秒和被秒就在一瞬间！</p><p><span>西方不胜:</span>目测MM很多</p></li>
<li><p><span>逍遥子:</span>风景很不错，打算周游世界</p><p><span>血杀成魔:</span>快意恩仇，不服来战！</p></li>
<li><p><span>抖啊抖:</span>休闲玩家也能玩得很爽</p><p><span>周不懂:</span>哎哟，不错哦</p></li>
<li><p><span>lucifer:</span>帮战很有特色</p><p><span>VS:</span>升级很快，准备拉朋友一起玩</p></li>
<li><p><span>泰坦之雷:</span>背景音乐很动人，很好玩的一款游戏</p><p><span>钢盾:</span>不花钱也能玩的爽，一点都不输RMB战士</p></li>
<li><p><span>gggl:</span>刚玩，感觉还不错</p><p><span>天下:</span>离开过，兜了一圈，发现还是这里最好</p></li>
<li><p><span>希瓦:</span>每次改版都能优化很多，加油</p><p><span>浪子回头:</span>任务系统不错，简单自由，得到的经验和钱还很多</p></li>
<li><p><span>伏魔罗汉:</span>帮战设计独到，仇恨也很合理</p><p><span>轻飘飘:</span>流畅不卡，打怪聊天两相宜</p></li>
<li><p><span>魔力法杖:</span>刚开始玩，试试</p><p><span>金才:</span>很有中国风，让我想起里小说里的武侠</p></li>
<li><p><span>李秋水:</span>每个门派都很平衡，互相克制</p><p><span>霜之哀伤:</span>进了个新服，人气貌似很旺，排队中</p></li>
<li><p><span>给力芬:</span>十天就升到了60级…</p><p><span>蛋疼:</span>通过游戏，认识了一帮好朋友，他们是我收获最大的财富。</p></li>
<li><p><span>TheBoss:</span>30块的话费不够我开销啊…</p><p><span>奴家来了:</span>处女网游，两年多了，感谢游戏的一路相伴。</p></li>
<li><p><span>牛哥:</span>很喜欢青城的瞬发，还有出其不意。刺客职业，牛逼。</p><p><span>六指琴魔:</span>这么多职业让我选哪个好…</p></li>
<li><p><span>十步一杀:</span>人多起来自己都不知道在哪..</p><p><span>喵星人:</span>大爱游戏的副本，喵哈哈，我要出金啊，跪拜求金，囧</p></li>
<li><p><span>帅到寂寞:</span>35副本连暴4件金装，哥大发了~！</p><p><span>我不是护士:</span>峨眉最漂亮了！还能给自己加Buff</p></li>
<li><p><span>夜夜笙歌:</span>新人做主线就能快速升级，做完来打帮战才爽快！</p><p><span>1412:</span>这升级也太快了，都没反应过来</p></li>
<li><p><span>狗蛋大兵:</span>我是医生我骄傲，我会救人我自豪</p><p><span>哀木涕:</span>男人就要做肉盾，挡住一切进攻</p></li>
<li><p><span>克丽丝:</span>一天收到上百睡火莲的路过…</p><p><span>非典型李白:</span>求包养，会暖床。</p></li>
<li><p><span>紫霞仙子:</span>我那乘着七彩云朵的老公，你看到了吗？上墙上墙 </p></li>
</ul>
<div>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航