Jquery中文网 > jQuery > jquery 教程 > 正文简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

发布时间：2013-07-15 编辑：www.jquerycn.cn

jquery版，简单易用的jQuery 版仿新浪微博向下滚动效果，现在越来越发现jquery太强大咯，哈哈。

<!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://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>简单易用的jQuery 写的仿新浪微博 向下滚动效果</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"> 
 
</style> 
<body> 
<div id="con"> 
<ul> 
<li> <img src="http://p.jquerycn.cn/jb/d/a/1442942531_242.gif" /> 
<p class="vright">甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网</p> 
</li> 
<li> <img src="http://p.jquerycn.cn/jb/d/a/1442942531_559.gif" /> 
<p class="vright">甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网 
</li> 
<li> <img src="http://p.jquerycn.cn/jb/d/a/1442942531_230.gif" /> 
<p class="vright"> 
甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网 
</p> 
</li> 
<li> <img src="http://p.jquerycn.cn/jb/d/a/1442942532_952.gif" /> 
<p class="vright">甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网 </p> 
</li> 
</ul> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章：
Jquery实现图片左右自动滚动示例
 jQuery仿照新浪微博提示框（确认框）
网页前端优化之滚动延时加载图片示例
 新浪微博如何注销账号?新浪微博注销账号4种方法
 php使用新浪微博API开发用户授权功能
 Canvas实现波浪进度图（附demo）
详解如何通过H5唤起本地app
新浪微博SDK for .Net 4.0 (OAuth2.0 官方V2版API)
2013年优秀jQuery插件整理小结
 学会了Python语言能做什么

上一篇：jQuery ready函数滥用分析下一篇：JQuery 选择器、过滤器介绍

[关闭]

简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)

最近更新

浏览排行