HTML代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字向上滚动</title>
<link type="text/css" rel="stylesheet" href="style/style.css"/>
<script type="text/javascript" src="JavaScript/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="JavaScript/action.js"></script>
</head>
<body>
<div class="content">
<p>俄方确认习大大将参加5月9日红场阅兵</p>
<p>李克强卡通形象登政府工作报告图解本</p>
<p>福建打下首虎副省长徐钢被调查</p>
<p>环保组织起诉山东污染企业索赔3千万</p>
<p>美国来华取证起诉中国外逃贪官</p>
</div>
</body>
</html>
CSS代码:
@charset "utf-8";
/* CSS Document */
.content{
width:350px;
height:150px;
border:1px solid gray;
border-radius:20px;
color:white;
background:green;
overflow:hidden;
margin:0 auto;
text-align:center;}
.content p:hover{
cursor:pointer;
font-size:18px;}
JS代码:
// JavaScript Document
$(function(){
//以下是文字循环向上滚动的代码(鼠标移入停止滚动,鼠标移开继续)
function roll(){
$(".content p:first").fadeOut("slow",function(){
$(this).remove().clone(true).appendTo(".content").fadeIn("slow");
});
}
var startRoll=setInterval(roll,2000);
$(".content").hover(function(){ //鼠标移入停止滚动
clearInterval(startRoll);
},function(){
startRoll=setInterval(roll,2000); //鼠标移出继续滚动
});
});
原文:http://www.cnblogs.com/Farris/p/4455590.html