【jQuery】動畫小練習
阿新 • • 發佈：2017-05-13
current href slow alt cart () chan move ==
1.jQuery部分代碼如下
<script type="text/javascript"> $(function(){ var page = 1; var i = 4; //每版放4個圖片 //向後 按鈕 $("span.next").click(function(){ //綁定click事件 var $parent = $(this).parents("div.v_show");//根據當前點擊元素獲取到父元素 var $v_show = $parent.find("div.v_content_list"); //尋找到“視頻內容展示區域”var $v_content = $parent.find("div.v_content"); //尋找到“視頻內容展示區域”外圍的DIV元素 var v_width = $v_content.width() ; var len = $v_show.find("li").length; var page_count = Math.ceil(len / i) ; //只要不是整數，就往大的方向取最小的整數 if( !$v_show.is(":animated") ){ //判斷“視頻內容展示區域”是否正在處於動畫if( page == page_count ){ //已經到最後一個版面了,如果再向後，必須跳轉到第一個版面。 $v_show.animate({ left : ‘0px‘}, "slow"); //通過改變left值，跳轉到第一個版面 page = 1; }else{ $v_show.animate({ left : ‘-=‘+v_width }, "slow"); //通過改變left值，達到每次換一個版面 page++; } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); } }); //往前 按鈕 $("span.prev").click(function(){ var $parent = $(this).parents("div.v_show");//根據當前點擊元素獲取到父元素 var $v_show = $parent.find("div.v_content_list"); //尋找到“視頻內容展示區域” var $v_content = $parent.find("div.v_content"); //尋找到“視頻內容展示區域”外圍的DIV元素 var v_width = $v_content.width(); var len = $v_show.find("li").length; var page_count = Math.ceil(len / i) ; //只要不是整數，就往大的方向取最小的整數 if( !$v_show.is(":animated") ){ //判斷“視頻內容展示區域”是否正在處於動畫 if( page == 1 ){ //已經到第一個版面了,如果再向前，必須跳轉到最後一個版面。 $v_show.animate({ left : ‘-=‘+v_width*(page_count-1) }, "slow"); page = page_count; }else{ $v_show.animate({ left : ‘+=‘+v_width }, "slow"); page--; } $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current"); } }); }); </script>
一些細節問題：
1.1元素都應該加上引號，如在parents、find以及$（）中；
1.2 width()需要加（），length不用；
1.3Math首字母大寫；
1.4addClass駝峰寫法；
2.HTML部分：
<body> <div class="v_show"> <div class="v_caption"> <h2 class="cartoon" title="卡通動漫">卡通動漫</h2> <div class="highlight_tip"> <span class="current">1</span><span>2</span><span>3</span><span>4</span> </div> <div class="change_btn"> <span class="prev" >上一頁</span> <span class="next">下一頁</span> </div> <em><a href="#">更多>></a></em> </div> <div class="v_content"> <div class="v_content_list"> <ul> <li><a href="#"><img src="img/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li> <li><a href="#"><img src="img/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li> </ul> </div> </div> </div> </body>
【jQuery】動畫小練習