微博首页简单的滚动效果
2012-09-12 20:04
363 查看
一个简单的微博首页动态信息滚动效果 [task]<!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>微博首页简单的滚动效果</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:hidden; } #con ul li p{ margin-left:68px;line-height:1.5; padding:10px;} --> </style> <body> <div id="con"> <ul> <li> <p>微博首页简单的滚动效果</p> </li> <li> <p>微博首页简单的滚动效果1</p> </li> <li> <p>微博首页简单的滚动效果2 </p> </li> <li> <p>微博首页简单的滚动效果3 </p> </li> </ul> </div> </body> </html> [/task]
相关文章推荐
- JS实现模拟新浪微博大厅和腾讯微博首页微博消息滚动效果
- 参考课堂案例jquery图片滚动效果实现微博首页内容滚动效
- dede仿站时----实现简单图片滚动(轮流图)效果
- 简单地新闻头条滚动效果
- 基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
- 简单地新闻头条滚动效果
- JS实现的N多简单无缝滚动代码(包含图文效果)
- 商城常用滚动的效果,代码简单实用,学习的好例子
- 【js与jquery】www.zhen.com首页顶部最新更新文章的循环滚动效果
- Android Scroll滑动效果精炼详解第(二)课:ViewDragHelper和简单实现QQ首页滑动效果
- 简单的图片、文字滚动效果
- js实现仿微博滚动显示信息的效果
- 模拟新浪微博首页滚动效果
- CSS3简单实现,数字滚动效果
- jQuery实现简单的间隔向上滚动效果
- 商城常用滚动的焦点图效果代码简单实用
- 简单实现js间歇或无缝滚动效果
- JS简单实现无缝滚动效果实例
- 小模块:内容循环滚动(仿新浪微博未登录首页滚动微博显示)
- Jquery仿微博消息平滑滚动效果