<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title >中国站长天空-网页特效-综合特效-仿新浪微博“大家正在说”渐入轮显滚动效果 </ title >
< meta http-equiv ="content-type" content ="text/html;charset=gb2312" >
<!-- 把下面代码加到<head>与</head>之间 -->
< style type ="text/css" >
*{ margin: 0; padding: 0;}
ul,li{ list-style-type: none;}
body{ font-size: 13px; background-color: #999999;}
#con{ width: 700px; height: 400px; margin: 10px auto; position: relative; border: 1px #666 solid; background-color: #FFFFFF; overflow: hidden;}
#con ul{ position: absolute; margin: 10px; top: 0; left: 0; padding: 0;}
#con ul li{ width: 100%; border-bottom: 1px #333333 dotted; padding: 20px 0; overflow: hidden;}
#con ul li a{ float: left; border: 1px #333333 solid; padding: 2px;}
#con ul li p{ margin-left: 68px; line-height: 1.5; padding: 10px;}
</ style >
< script type ="text/javascript" src ="http://www.zzsky.cn/effect/images/jquery.js" ></ script >
< script language ="javascript" >
$( function(){
var scrtime;
$("#con").hover( function(){
clearInterval(scrtime);
}, function(){
scrtime = setInterval( function(){
var $ul = $("#con ul");
var liHeight = $ul.find("li:last").height();
$ul.animate({marginTop : liHeight+40 +"px"},1000, function(){
$ul.find("li:last").prependTo($ul)
$ul.find("li:first").hide();
$ul.css({marginTop:0});
$ul.find("li:first").fadeIn(1000);
});
},3000);
}).trigger("mouseleave");
});
</ script >
</ head >
< body >
<!-- 把下面代码加到<body>与</body>之间 -->
< div id ="con" >
< ul >
< li >
< a href ="http://frieboy168.blog.163.com/blog/#" >< img src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
< p class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。作相思。 </ p >
</ li >
< li >
< a href ="http://frieboy168.blog.163.com/blog/#" >< img src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
< p class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </ p >
</ li >
< li >
< a href ="http://frieboy168.blog.163.com/blog/#" >< img src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
< p class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </ p >
</ li >
< li >
< a href ="http://frieboy168.blog.163.com/blog/#" >< img src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
< p class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </ p >
</ li >
</ ul >
</ div >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title >中国站长天空-网页特效-综合特效-仿新浪微博“大家正在说”渐入轮显滚动效果 </ title >
< meta http-equiv ="content-type" content ="text/html;charset=gb2312" >
<!-- 把下面代码加到<head>与</head>之间 -->
< style type ="text/css" >
*{ margin: 0; padding: 0;}
ul,li{ list-style-type: none;}
body{ font-size: 13px; background-color: #999999;}
#con{ width: 700px; height: 400px; margin: 10px auto; position: relative; border: 1px #666 solid; background-color: #FFFFFF; overflow: hidden;}
#con ul{ position: absolute; margin: 10px; top: 0; left: 0; padding: 0;}
#con ul li{ width: 100%; border-bottom: 1px #333333 dotted; padding: 20px 0; overflow: hidden;}
#con ul li a{ float: left; border: 1px #333333 solid; padding: 2px;}
#con ul li p{ margin-left: 68px; line-height: 1.5; padding: 10px;}
</ style >
< script type ="text/javascript" src ="http://www.zzsky.cn/effect/images/jquery.js" ></ script >
< script language ="javascript" >
$( function(){
var scrtime;
$("#con").hover( function(){
clearInterval(scrtime);
}, function(){
scrtime = setInterval( function(){
var $ul = $("#con ul");
var liHeight = $ul.find("li:last").height();
$ul.animate({marginTop : liHeight+40 +"px"},1000, function(){
$ul.find("li:last").prependTo($ul)
$ul.find("li:first").hide();
$ul.css({marginTop:0});
$ul.find("li:first").fadeIn(1000);
});
},3000);
}).trigger("mouseleave");
});
</ script >
</ head >
< body >
<!-- 把下面代码加到<body>与</body>之间 -->
< div id ="con" >
< ul >
< li >
< a href ="http://frieboy168.blog.163.com/blog/#" >< img src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
< p class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。作相思。 </ p >
</ li >
< li >
< a href ="http://frieboy168.blog.163.com/blog/#" >< img src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
< p class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </ p >
</ li >
< li >
< a href ="http://frieboy168.blog.163.com/blog/#" >< img src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
< p class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </ p >
</ li >
< li >
< a href ="http://frieboy168.blog.163.com/blog/#" >< img src ="http://www.zzsky.cn/effect/images/201011142300.jpg" ></ a >
< p class ="vright" >第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </ p >
</ li >
</ ul >
</ div >
</ body >
</ html >