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

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

发布时间：2013-07-15 编辑：jiaochengji.com

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.jiaochengji.com/jb/d/a/1442942531_242.gif" /> 
<p class="vright">甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网</p> 
</li> 
<li> <img src="http://p.jiaochengji.com/jb/d/a/1442942531_559.gif" /> 
<p class="vright">甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网 
</li> 
<li> <img src="http://p.jiaochengji.com/jb/d/a/1442942531_230.gif" /> 
<p class="vright"> 
甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网 
</p> 
</li> 
<li> <img src="http://p.jiaochengji.com/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版仿新浪微博向下滚动效果(附DEMO)
基于jQuery的上下无缝滚动应用(单行或多行)
仿新浪微博返回顶部的jquery实现代码
 基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Jquery实现图片左右自动滚动示例
 jQuery仿照新浪微博提示框（确认框）
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 新浪微博如何注销账号?新浪微博注销账号4种方法
 网页前端优化之滚动延时加载图片示例

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

[关闭]

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

最近更新

浏览排行