zoukankan      html  css  js  c++  java

  • jQuery 实现上下,左右滑动

       

    前几天的任务: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
      •        
                 
  • 相关阅读:
    Understanding about Baire Category Theorem
    Isometric embedding of metric space
    Convergence theorems for measurable functions
    Mindmap for "Principles of boundary element methods"
    Various formulations of Maxwell equations
    Existence and uniqueness theorems for variational problems
    Kernels and image sets for an operator and its dual
    [loj6498]农民
    [luogu3781]切树游戏
    [atAGC051B]Three Coins
  • 原文地址：https://www.cnblogs.com/zhwl/p/3526465.html
Copyright © 2011-2022 走看看