类似新浪首页的垂直滚动效果
2011-12-08 20:05
435 查看
<!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 a{ float:left; border:1px #333333 solid; padding:2px;} #con ul li p{ margin-left:68px;line-height:1.5; padding:10px;} --> </style> <body> <div id="con"> <ul> <li> <a href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可不相</p> </li> <li> <a href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright">第一最好不相见,如此便可不相恋。第二 </p> </li> <li> <a href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright">第一最好不相见,教科书所说教科书所说的思想道德教育在现今社会一点也体现不出,先进的特色社会主义啊,你何时才能拯救现今社会啊的思想教科书所说的思想道德教育在现今社会一点也体现不出,先进的特色社会主义啊,你何时 </p> </li> <li> <a href="#"><img src="http://tp3.sinaimg.cn/1696357270/50/1282628065/1" /></a> <p class="vright">第一最好不相见,如此便可不相恋。第二最好不相知,如此便可生死作相思。abc </p> </li> </ul> </div> </body> </html>
转载自http://www.oschina.net/code/snippet_54371_4475
相关文章推荐
- Android仿淘宝首页头条View垂直滚动效果
- Objective-C 类似网易首页滚动导航的效果
- 实现类似天猫列表消息自动垂直滚动效果
- 首页垂直滚动TextView广告效果,使用TextSwicher+animation实现
- Android编程实现类似天气预报图文字幕垂直滚动效果的方法
- 滚动的文字效果 就类似广告的LED
- Android TextView实现垂直滚动效果的方法
- 论坛源码推荐(9月2日):创建和管理复杂结构的tableView,类似Instagram的自动滚动效果
- Jquery滚动插件–Xslider:支持水平滚动和垂直滚动的多种效果!
- 仿淘宝首页的淘宝头条View垂直滚动
- js新浪首页可关闭背景效果代码
- 【JavaScript】类似maque滚动文字效果
- Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
- Android中TextView实现垂直滚动和上下滚动效果
- 【Android】App首页上下滚动快报控件 通知控件 类似京东快报控件(二)
- 仿淘宝首页的淘宝头条View垂直滚动
- android 文字超出控件宽度时,自动滚动显示,类似跑马灯效果
- 实现类似金山点击首页内存清理后跳转到内存页面效果
- 实现 类似 Android Market || QQ 横屏滚动 的 效果