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

更新时间：2011年02月14日 21:41:53 作者：

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> <a href="#"><img src="http://demo.jb51.net/demoimg/tx.gif" /></a> <p class="vright"><a href="https://www.jb51.net">甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网</a></p> </li> <li> <a href="#"><img src="http://demo.jb51.net/demoimg/tx.gif" /></a> <p class="vright"><a href="https://www.jb51.net">甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网</a> </li> <li> <a href="#"><img src="http://demo.jb51.net/demoimg/tx.gif" /></a> <p class="vright"> <a href="https://www.jb51.net">甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网</a> </p> </li> <li> <a href="#"><img src="http://demo.jb51.net/demoimg/tx.gif" /></a> <p class="vright"><a href="https://www.jb51.net">甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网合肥网甜蜜情人节给点力——合肥网2011情人节.情人周11大钜献_合肥网专题 - 专题频道-合肥网</a> </p> </li> </ul> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

向下滚动

基于jquery实现漂亮的动态信息提示效果
这个效果是在页面头部出现的，出现一下会自动隐藏，上面有x那个提示就要手动关闭一下，其他的都是自动隐藏的！
2011-08-08
jQuery实现获取table中鼠标click点击位置行号与列号的方法
这篇文章主要介绍了jQuery实现获取table中鼠标click点击位置行号与列号的方法,涉及jQuery事件响应及针对table表格元素相关操作技巧,需要的朋友可以参考下
2017-10-10
jQuery中delegate与on的用法与区别示例介绍
jQuery1.7中 .delegate()已被.on()取代，下面以示例的方式为大家介绍下jQuery中delegate与on的用法与区别，感兴趣的朋友可以参考下
2013-12-12
jQuery选择器之子元素选择器详解
这篇文章主要为大家详细介绍了jQuery选择器之子元素选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
jquery仿微信聊天界面
这篇文章主要为大家详细介绍了jquery仿微信聊天界面的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Jquery操作DOM元素方法详解
本文详细讲解了Jquery操作DOM元素的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-05-05
jquery JSON的解析方式
第一次用JSON作为jquery异步请求的传输对象，结果在jquery请求后返回的结果是字符串还是json对象上折腾了半天。等到问题解决了，也大致明白怎么个意思了，归根结底还是对jquery对相关json对象获取的理解有所偏差。
2009-07-07
自定义一个jquery插件[鼠标悬浮时候出现说明label]
自定义一个jquery插件，一个简单的jquery.js,入门的jquery插件，jquery入门实例,jquery helloworld。
2011-06-06
jQuery实现的进度条效果
本文主要给大家介绍的是jQuery实现的进度效果的实例代码，其实现原理就是使用 Javascript 控制 SPAN CSS 的宽度（以及其他的样式）有需要的小伙伴可以参考下。
2015-07-07
easyUI使用分页过滤器对数据进行分页操作实例分析
这篇文章主要介绍了easyUI使用分页过滤器对数据进行分页操作,结合实例形式详细分析了easyUI分页过滤器对数据进行分页操作具体步骤与相关操作技巧,需要的朋友可以参考下
2020-06-06