jQueryは上下を実現し、左右にスライドします.
3537 ワード
先日のジョブ:http://t.sina.com.cn/ のスライド効果
グラデーションは十分な空白を移動します.最後のフェードアウト->グラデーションは十分な空白を移動します.
私達がするのは左に移動する効果です.この効果はDIV設定を追加して、部分を超えて表示しないでください.これで使えます.
余計な話はしないで,話を切り出しなさい.
グラデーションは十分な空白を移動します.最後のフェードアウト->グラデーションは十分な空白を移動します.
私達がするのは左に移動する効果です.この効果はDIV設定を追加して、部分を超えて表示しないでください.これで使えます.
余計な話はしないで,話を切り出しなさい.
//isw2 zhouxianglh 2010.07.07
// ul
var 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>