简单易用的基于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中ajax的相关知识点汇总
这篇文章主要给大家介绍了关于jQuery中ajax相关知识点的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
jQuery解析XML文件同时动态增加js文件的方法
这篇文章主要介绍了jQuery解析XML文件同时动态增加js文件的方法,涉及jQuery Ajax调用及返回函数中增加js文件的相关使用技巧,需要的朋友可以参考下
2015-06-06
jQuery简单实现title提示效果示例
这篇文章主要介绍了jQuery简单实现title提示效果的方法,结合实例形式分析了jQuery封装与使用title提示框的方法,需要的朋友可以参考下
2016-08-08
jQuery制作圣诞主题页面更像是爱情影集
这篇文章主要为大家详细介绍了jQuery制作圣诞主题页面的方法，类似动感影集，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
jQuery实现自动调整字体大小的方法
这篇文章主要介绍了jQuery实现自动调整字体大小的方法,涉及jQuery针对页面属性与样式动态操作的相关技巧,需要的朋友可以参考下
2015-06-06
JQuery实现图片轮播效果
用JQuery操作DOM确实很方便，并且JQuery提供了非常人性化的API应付我们的各种需求，其中选择器在此示例-“JQuery实现图片轮播效果”上体现的尤为出色，大大简化了js的代码，需要的朋友可以参考下
2015-09-09
Jquery实现的一种常用高亮效果示例代码
本篇文章只要是对Jquery实现的一种常用高亮效果示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
基于jquery中children()与find()的区别介绍
本篇文章介绍了，基于jquery中children()与find()的区别，需要的朋友参考下
2013-04-04
jquery 页面滚动到指定DIV实现代码
页面滚动到指定DIV的方法有很多，在本文将为大家介绍下jquery是如何实现的
2013-09-09
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
jQuery.Hz2Py.js插件实现的汉字转拼音是一款很实用的在线转换功能，此插件已经把汉字打包成一个插件库，调用的时间很简单，只调用一个方法就可以实现转换了
2015-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具