本文實例講述了jQuery簡單實現上下,左右滑動的方法。分享給大家供大家參考，具體如下：
漸變移動出足夠的空白 -> 淡出最后一個 ->漸變移動出足夠的空白
我們要做的是向左移動效果.這個效果用時需添加一個DIV設置超出部分不顯示,這樣就可以用了.
閑話不多說,上碼
//isw2 zhouxianglh 2010.07.07//移動ulvar 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>PS：這里再為大家推薦幾款代碼格式化、美化工具，相信大家在以后的開發過程中會用得到：
在線JavaScript代碼美化、格式化工具：
http://tools.VeVB.COm/code/js
JavaScript壓縮/格式化/加密工具：
http://tools.VeVB.COm/code/jscompress
XML代碼在線格式化美化工具：
http://tools.VeVB.COm/code/xmlcodeformat
json代碼在線格式化/美化/壓縮/編輯/轉換工具：
http://tools.VeVB.COm/code/jsoncodeformat
在線JSON代碼檢驗、檢驗、美化、格式化工具：
http://tools.VeVB.COm/code/json
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
