<!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> <mce:script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js" mce_src="http://www.w3school.com.cn/jquery/jquery.js"></mce:script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce: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"); }); // --></mce:script> <mce: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: } #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;} --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- *{ 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: } #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;} --></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">*{ 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: } #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> <body> <div id="con"> <ul> <li> <a href="#" mce_href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" mce_src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 作相思。 </p> </li> <li> <a href="#" mce_href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" mce_src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱, 不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </p> </li> <li> <a href="#" mce_href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" mce_src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </p> </li> <li> <a href="#" mce_href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" mce_src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相思。 第三最好不相伴,如此便可不相欠。第四最好不相惜,如此便可不相忆。 第五最好不相爱,如此便可不相弃。 第六最好不相对,如此便可不相会。 第七最好不相误,如此便可不相负。第八最好不相许,如此便可不相续。 第九最好不相依,如此便可不相偎。第十最好不相遇,如此便可不相聚。 但曾相见便相知,相见何如不见时。安得与君相诀绝,免教生死作相思。 </p> </li> </ul> </div> </body> </html>