學習筆記本: 【Jquery】商品切換效果

範例一：右下左飄走
範例網址：演示

範例二：往右消失
範例網址：演示1 演示2

script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script>
var $i=0;
var $coupNum;
$(function (){
 $coupNum = $(".coup").length;
 $("#apDiv1 .coup").each(function(index, element) {
  $(this).css("z-index",$(this).css("z-index") - index);
 });
 setInterval("couponMove()",3000); 
});
function couponMove(){
 $("#apDiv1 .coup").eq($i).animate({left: "+=300"},1000,'easeInOutCubic',function (){
  $(this).css({left:"0px","z-index":"0"});
  $i++;
  $("#apDiv1 .coup").each(function(index, element) {
            $(this).css("z-index",$(this).css("z-index")+1);
        });
  if ($coupNum <= $i) $i=0;
 });
}
</script>
<style type="text/css">
body {
 padding:0px;
 margin:0px;
}
#main {
 position: relative;
 width:1251px;
 margin:0 auto;
 z-index: 1;
}
#apDiv1 {
 position: absolute;
 width: 223px;
 height: 163px;
 z-index: 2;
 left: 1027px;
 top: 474px;
 overflow:hidden;
}
.coup {
 position: absolute;
 z-index:100;
}
</style>
</head>

學習筆記本

2014年5月15日星期四

【Jquery】商品切換效果

沒有留言:

張貼留言

2014年5月15日 星期四

【Jquery】商品切換效果

沒有留言:

張貼留言

2014年5月15日星期四