前几天的任务:http://t.sina.com.cn/ 的下滑效果.
渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白
我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了.
闲话不多说,上码
- //isw2 zhouxianglh 2010.07.07
- //移动ul
- var slideOperate = {
- slideUlId : "",//UL id 用于操作Ul
- fadeInTime : 2000,//淡出淡入时间
- slideDownTime : 2000,//滑动时间
- nextLeft:function(){//往右滑动
- var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
- $(lastLi).find("div").animate({opacity:0});//隐藏最后一个li的内容
- $(lastLi).animate({width : "hide",height : lastLi.height()},function(){//隐藏最后一个li
- $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
- });
- $(lastLi).animate({width : "show"},{duration:slideOperate.fadeInTime,complete:function(){//显示宽度
- lastLi.find("div").animate({opacity:1},slideOperate.fadeInTime);//显示
- }});
- },
- nextDown:function(){//往下滑动(前提Ul竖排)
- var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
- $(lastLi).find("div").fadeOut();//隐藏最后一个li的内容
- $(lastLi).hide();//隐藏最后一个li
- $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
- $(lastLi).slideDown(slideOperate.slideDownTime,function(){
- lastLi.find("div").fadeIn(slideOperate.fadeInTime);
- });
- }
- };
HTML页面
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>列</title>
- <link href="css/slideRow.css" rel="stylesheet" type="text/css" />
- <script language="javascript" type="text/javascript" src="js/jquery1.2.3.js"></script>
- <script language="javascript" type="text/javascript" src="js/slideRow.js"></script>
- <script language="javascript" type="text/javascript">
- $(document).ready(
- function(){
- slideOperate.slideUlId = "ulRowCount";
- setInterval("slideOperate.nextLeft()",5000);//定时
- }
- );
- </script>
- </head>
- <body>
- <ul id="ulRowCount">
- <li class="liRow">
- <div class="rowDiv">
- 你好1
- <br />
- 你好1
- <br />
- 你好1
- <br />
- 你好1
- <br />
- </div>
- </li>
- <li class="liRow">
- <div class="rowDiv">
- 你好2
- </div>
- </li>
- <li class="liRow">
- <div class="rowDiv">
- 你好5asdfasdf
- <br />
- 你好5
- <br />
- 你好5
- <br />
- 你好5
- <br />
- <br />
- 你好5
- <br />
- <br />
- 你好5dsfasdfasdfas
- <br />
- </div>
- </li>
- </ul>
- </body>
- </html>