js实现字体向上轮播

js 段金标
文章标签: js

话不多说,请看js实现代码(代码如下)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;list-style: none;}
			#dome{
					margin: 0px auto;
					width: 218px;
					height: 264px;
					position: relative;
					overflow: hidden;
				}
			#z{
					width: 208px;
					height: 260px;
					border: 2px solid red;
				}
			#express{
					font-size: 14px;
					width:194px;
					height: 1040px; 
					margin-left:7px;
					position: absolute;
				}
			li{
					border-bottom: 1px dashed #ccc;l
					ine-height: 25px;
				}
		</style>
		<script type="text/javascript">
			var p=0;//声明移动量
			function you(){
				var express=document.getElementById("express");//获取express对象
				express.style.top="-"+p+"px";//express对象样式往上移动
				p++;//每调用一次移动量+1
				if(p>780){//如果往上移动量大于816,则移动量清0,重新开始
					p=0;
				}
			}
			ks();
			/*鼠标悬停在循环字体上时暂停*/
			function seover(){//鼠标悬停事件
				clearInterval(s);//清除定时器	
			}
			function seout(){//鼠标离开事件
				ks();//调用定时器方法
			}
			function ks(){//定时器方法
				s=setInterval(you,20);//setInterval()定时函数
			}
		</script>
	</head>
	<body>
	<div id="dome">
		<div id="z">
			<ul id="express" onmouseover="seover()" onmouseout="seout()">
		       <li>·2010考研英语大纲到货75折...</li>
		       <li>·权威定本四大名著(人民文...</li>
		       <li>·口述历史权威唐德刚先生国...</li>
		       <li>·袁伟民与体坛风云:实话实...</li>
		       <li>·我们台湾这些年:轰动两岸...</li>
		       <li>·畅销教辅推荐:精品套书50...</li>
		       <li>·2010版法律硕士联考大纲75...</li>
		       <li>·计算机新书畅销书75折抢购</li>
		       <li>·2009年孩子最喜欢的书>></li>
		       <li>·弗洛伊德作品精选集59折</li>
			    <li>·2010考研英语大纲到货75折...</li>
		       <li>·权威定本四大名著(人民文...</li>
		       <li>·口述历史权威唐德刚先生国...</li>
		       <li>·袁伟民与体坛风云:实话实...</li>
		       <li>·我们台湾这些年:轰动两岸...</li>
		       <li>·畅销教辅推荐:精品套书50...</li>
		       <li>·2010版法律硕士联考大纲75...</li>
		       <li>·计算机新书畅销书75折抢购</li>
		       <li>·2009年孩子最喜欢的书>></li>
		       <li>·弗洛伊德作品精选集59折</li>
			    <li>·2010考研英语大纲到货75折...</li>
		       <li>·权威定本四大名著(人民文...</li>
		       <li>·口述历史权威唐德刚先生国...</li>
		       <li>·袁伟民与体坛风云:实话实...</li>
		       <li>·我们台湾这些年:轰动两岸...</li>
		       <li>·畅销教辅推荐:精品套书50...</li>
		       <li>·2010版法律硕士联考大纲75...</li>
		       <li>·计算机新书畅销书75折抢购</li>
		       <li>·2009年孩子最喜欢的书>></li>
		       <li>·弗洛伊德作品精选集59折</li>
			    <li>·2010考研英语大纲到货75折...</li>
		       <li>·权威定本四大名著(人民文...</li>
		       <li>·口述历史权威唐德刚先生国...</li>
		       <li>·袁伟民与体坛风云:实话实...</li>
		       <li>·我们台湾这些年:轰动两岸...</li>
		       <li>·畅销教辅推荐:精品套书50...</li>
		       <li>·2010版法律硕士联考大纲75...</li>
		       <li>·计算机新书畅销书75折抢购</li>
		       <li>·2009年孩子最喜欢的书>></li>
		       <li>·弗洛伊德作品精选集59折</li>
		     </ul>
		</div>
   </div>
	</body>
</html>

希望此文本能对大家的学习有所帮助

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :