• 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
      •        
                 
  • 相关阅读:
    数仓1.3 |行为数据| 业务数据需求
    数仓1.1 |概述| 集群环境搭建
    麒麟Kylin
    ng--todolist
    mysql必知必会--用正则表达式 进行搜索
    mysql必知必会--用通配符进行过滤
    mysql必知必会--数 据 过 滤
    mysql必知必会--过 滤 数 据
    mysql必知必会--排序检索数据
    mysql必知必会--检 索 数 据
  • 原文地址：https://www.cnblogs.com/zhwl/p/3526465.html
Copyright © 2020-2023  润新知