Jquery应用案例之单条新闻的滚动效果(仿雅虎首页新闻滚动)
代码如下:
头部分代码:
头部分代码:
<
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 >
分类:
AJAX学习