生活随笔
收集整理的這篇文章主要介紹了
jQuery 实现上下,左右滑动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前幾天的任務:http://t.sina.com.cn/? 的下滑效果.
漸變移動出足夠的空白 -> 淡出最后一個 ->漸變移動出足夠的空白
?
我們要做的是向左移動效果.這個效果用時需添加一個DIV設置超出部分不顯示,這樣就可以用了.
閑話不多說,上碼
Js代碼 ?
????var?slideOperate?=?{??????slideUlId?:?"",??????fadeInTime?:?2000,??????slideDownTime?:?2000,??????nextLeft:function(){??????????var?lastLi?=?$("#"?+?slideOperate.slideUlId?+?"?li:last-child");??????????$(lastLi).find("div").animate({opacity:0});??????????$(lastLi).animate({width?:?"hide",height?:?lastLi.height()},function(){??????????????$("#"?+?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(){??????????var?lastLi?=?$("#"?+?slideOperate.slideUlId?+?"?li:last-child");??????????$(lastLi).find("div").fadeOut();??????????$(lastLi).hide();??????????$("#"?+?slideOperate.slideUlId?+?"?li:first-child").before(lastLi);??????????$(lastLi).slideDown(slideOperate.slideDownTime,function(){??????????????lastLi.find("div").fadeIn(slideOperate.fadeInTime);??????????});??????}??};?? ?HTML頁面
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>?? - ?????????
- WebRoot.zip (16.3 KB) ????????? ?????????
- 下載次數: 617 ???????
總結
以上是生活随笔為你收集整理的jQuery 实现上下,左右滑动的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
