仿新浪微博向下滚动效果代码,JS代码库,德仔网

代码语言

代码分类

【JS】仿新浪微博向下滚动效果

作者:Dezai.CN / 发布于2013/6/27/ 873

引用了外部文件进去后刷新一下谢谢鼠标放移入停止滚动移除开始滚动


	<!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>
	<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>

	<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>
	<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;}
	-->
	</style>
	<body>
	<div id="con">
	 <ul>
	 <li> <a href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
	 <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。
	 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。
	 作相思。 
	 </li>
	 <li> <a href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
	 <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。
	 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。
	 第五最好不相爱， 不相对，如此便可不相会。
	 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。
	 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。
	 但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 
	 </li>
	 <li> <a href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
	 <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。
	 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。
	 第五最好不相爱，如此便可不相弃。 第六最好不相对，如此便可不相会。
	 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。
	 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。
	 但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 
	 </li>
	 <li> <a href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a>
	 <p class="vright">第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。
	 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。
	 第五最好不相爱，如此便可不相弃。 第六最好不相对，如此便可不相会。
	 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。
	 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。
	 但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。 
	 </li>
	 </ul>
	</div>
	</body>
	</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　向下滚动　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)