jQuery 实现上下,左右滑动

浏览数：22 / 时间：2015年06月09日
   

前几天的任务:http://t.sina.com.cn/  的下滑效果.

渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白

 

我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了.

闲话不多说,上码

Js代码  
  1. //isw2 zhouxianglh 2010.07.07  
  2. //移动ul  
  3. var slideOperate = {  
  4.     slideUlId : "",//UL id 用于操作Ul  
  5.     fadeInTime : 2000,//淡出淡入时间  
  6.     slideDownTime : 2000,//滑动时间  
  7.     nextLeft:function(){//往右滑动  
  8.         var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");  
  9.         $(lastLi).find("div").animate({opacity:0});//隐藏最后一个li的内容  
  10.         $(lastLi).animate({width : "hide",height : lastLi.height()},function(){//隐藏最后一个li  
  11.             $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置  
  12.         });  
  13.         $(lastLi).animate({width : "show"},{duration:slideOperate.fadeInTime,complete:function(){//显示宽度  
  14.             lastLi.find("div").animate({opacity:1},slideOperate.fadeInTime);//显示  
  15.         }});  
  16.     },  
  17.     nextDown:function(){//往下滑动(前提Ul竖排)  
  18.         var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");  
  19.         $(lastLi).find("div").fadeOut();//隐藏最后一个li的内容  
  20.         $(lastLi).hide();//隐藏最后一个li  
  21.         $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置  
  22.         $(lastLi).slideDown(slideOperate.slideDownTime,function(){  
  23.             lastLi.find("div").fadeIn(slideOperate.fadeInTime);  
  24.         });  
  25.     }  
  26. };  

 HTML页面

Html代码  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.         <title>列</title>  
  6.         <link href="css/slideRow.css" rel="stylesheet" type="text/css" />  
  7.         <script language="javascript" type="text/javascript" src="js/jquery1.2.3.js"></script>  
  8.         <script language="javascript" type="text/javascript" src="js/slideRow.js"></script>  
  9.         <script language="javascript" type="text/javascript">  
  10.         $(document).ready(  
  11.             function(){  
  12.                 slideOperate.slideUlId = "ulRowCount";  
  13.                 setInterval("slideOperate.nextLeft()",5000);//定时  
  14.             }  
  15.         );  
  16.         </script>  
  17.     </head>  
  18.     <body>  
  19.         <ul id="ulRowCount">  
  20.             <li class="liRow">  
  21.                 <div class="rowDiv">  
  22.                     你好1  
  23.                     <br />  
  24.                     你好1  
  25.                     <br />  
  26.                     你好1  
  27.                     <br />  
  28.                     你好1  
  29.                     <br />  
  30.                 </div>  
  31.             </li>  
  32.             <li class="liRow">  
  33.                 <div class="rowDiv">  
  34.                     你好2  
  35.                 </div>  
  36.             </li>  
  37.             <li class="liRow">  
  38.                 <div class="rowDiv">  
  39.                     你好5asdfasdf  
  40.                     <br />  
  41.                     你好5  
  42.                     <br />  
  43.                     你好5  
  44.                     <br />  
  45.                     你好5  
  46.                     <br />  
  47.                     <br />  
  48.                     你好5  
  49.                     <br />  
  50.                     <br />  
  51.                     你好5dsfasdfasdfas  
  52.                     <br />  
  53.                 </div>  
  54.             </li>  
  55.         </ul>  
  56.     </body>  
  57. </html>  
                 
             
  • WebRoot.zip (16.3 KB)
    •                    
  • 下载次数: 617
    •        
             

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 代码 int text htm html string word top value js 下载 代码 int text htm html string word top value js 下载

相关文章

随机文章

您可能还喜欢

您可能还喜欢