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

最新推荐文章于 2024-08-16 14:14:12 发布
liujiajie1990
最新推荐文章于 2024-08-16 14:14:12 发布
阅读量6.9k
点赞数 1
分类专栏： JS 文章标签： function 游戏 json xhtml 网游聊天
本文链接：https://blog.youkuaiyun.com/liujiajie1990/article/details/7741291
版权
JS 专栏收录该内容
11 篇文章
订阅专栏
<!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.οnlοad=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').οnmοuseοver=function(){
		clearInterval(oTime);
	}
	$('box').οnmοuseοut=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>