jQuery簡(jiǎn)單實(shí)現(xiàn)上下,左右滑動(dòng)的方法

更新時(shí)間：2016年06月01日 12:43:30 作者：鄭文亮

這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)上下,左右滑動(dòng)的方法,涉及jQuery動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery簡(jiǎn)單實(shí)現(xiàn)上下,左右滑動(dòng)的方法。分享給大家供大家參考，具體如下：

漸變移動(dòng)出足夠的空白 -> 淡出最后一個(gè) ->漸變移動(dòng)出足夠的空白

我們要做的是向左移動(dòng)效果.這個(gè)效果用時(shí)需添加一個(gè)DIV設(shè)置超出部分不顯示,這樣就可以用了.

閑話不多說(shuō),上碼

//isw2 zhouxianglh 2010.07.07
//移動(dòng)ul
var slideOperate = {
  slideUlId : "",//UL id 用于操作Ul
  fadeInTime : 2000,//淡出淡入時(shí)間
  slideDownTime : 2000,//滑動(dòng)時(shí)間
  nextLeft:function(){//往右滑動(dòng)
    var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
    $(lastLi).find("div").animate({opacity:0});//隱藏最后一個(gè)li的內(nèi)容
    $(lastLi).animate({width : "hide",height : lastLi.height()},function(){//隱藏最后一個(gè)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(){//往下滑動(dòng)(前提Ul豎排)
    var lastLi = $("#" + slideOperate.slideUlId + " li:last-child");
    $(lastLi).find("div").fadeOut();//隱藏最后一個(gè)li的內(nèi)容
    $(lastLi).hide();//隱藏最后一個(gè)li
    $("#" + slideOperate.slideUlId + " li:first-child").before(lastLi);//前置
    $(lastLi).slideDown(slideOperate.slideDownTime,function(){
      lastLi.find("div").fadeIn(slideOperate.fadeInTime);
    });
  }
};

HTML頁(yè)面

<!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);//定時(shí)
      }
    );
    </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>

PS：這里再為大家推薦幾款代碼格式化、美化工具，相信大家在以后的開(kāi)發(fā)過(guò)程中會(huì)用得到：

在線JavaScript代碼美化、格式化工具：
http://tools.jb51.net/code/js

JavaScript壓縮/格式化/加密工具：
http://tools.jb51.net/code/jscompress

XML代碼在線格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat

json代碼在線格式化/美化/壓縮/編輯/轉(zhuǎn)換工具：
http://tools.jb51.net/code/jsoncodeformat

在線JSON代碼檢驗(yàn)、檢驗(yàn)、美化、格式化工具：
http://tools.jb51.net/code/json

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: