Jquery应用案例之单条新闻的滚动效果(仿雅虎首页新闻滚动)
代码如下:
头部分代码:
jquery代码部分:
HTML代码部分:
头部分代码:
<html><head>
<title>单条新闻滚动效果</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
<title>单条新闻滚动效果</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/interface.js"></script>
jquery代码部分:
<script type = "text/javascript">
var n=0;
var m=0
function lie(){
$(function(){
var $firstNode = $('#lie>p');
$firstNode.eq(n).removeAttr("display");
$firstNode.eq(n).fadeOut('slow',function(){
$firstNode.eq(n+1).fadeIn("slow");
m++;
if(m>=$("p").length)
{
n=0;
m=0
}
else
{
n++;
}
});
});
}
setInterval('lie()',3000);
</script>
var n=0;
var m=0
function lie(){
$(function(){
var $firstNode = $('#lie>p');
$firstNode.eq(n).removeAttr("display");
$firstNode.eq(n).fadeOut('slow',function(){
$firstNode.eq(n+1).fadeIn("slow");
m++;
if(m>=$("p").length)
{
n=0;
m=0
}
else
{
n++;
}
});
});
}
setInterval('lie()',3000);
</script>
HTML代码部分:
<body>
<div id="lie" >
<p style="display:none">1、通知说,近期我国居民消费价格总水平出现明显上涨</p>
<p style="display:none">2、各地区、各部门必须清醒地认识到形势的严峻性。</p>
<p style="display:none">3、一是切实抓好秋粮生产。秋粮是粮食生产的大头.</p>
<p style="display:none">4、付尚未下拨的财政支农资金,各地要及时兑现给种粮农民.</p>
<p style="display:none">5、付尚未下拨的财政支农资金,各地要及时兑现给种粮农民.</p>
<p style="display:none">6、收购价政策。继续稳妥地推动农业保险保费补贴试点工作.</p>
<p style="display:none">7、二是认真落实扶持生猪生产的各项政策措施。目前中央财政已下拨.</p>
</div>
</body>
<div id="lie" >
<p style="display:none">1、通知说,近期我国居民消费价格总水平出现明显上涨</p>
<p style="display:none">2、各地区、各部门必须清醒地认识到形势的严峻性。</p>
<p style="display:none">3、一是切实抓好秋粮生产。秋粮是粮食生产的大头.</p>
<p style="display:none">4、付尚未下拨的财政支农资金,各地要及时兑现给种粮农民.</p>
<p style="display:none">5、付尚未下拨的财政支农资金,各地要及时兑现给种粮农民.</p>
<p style="display:none">6、收购价政策。继续稳妥地推动农业保险保费补贴试点工作.</p>
<p style="display:none">7、二是认真落实扶持生猪生产的各项政策措施。目前中央财政已下拨.</p>
</div>
</body>