jQuery滑动效果实例
生活随笔
收集整理的這篇文章主要介紹了
jQuery滑动效果实例
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
parents([expr])取得一個(gè)包含著所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通過(guò)一個(gè)可選的表達(dá)式進(jìn)行篩選。獲取的是集合。
HTML 代碼:
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>jQuery 代碼:
$("span").parents("p")找到每個(gè)span的所有是p元素的祖先元素。
find(expr)
搜索所有與指定表達(dá)式匹配的元素。這個(gè)函數(shù)是找出正在處理的元素的后代元素的好方法。
HTML 代碼:
<p><span>Hello</span>, how are you?<span>I'm fine!</span></p>jQuery 代碼:
$("p").find("span")結(jié)果:
[ <span>Hello</span> ,<span>I'm fine!</span>]
siblings(expr)
取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有唯一同輩元素的元素集合。可以用可選的表達(dá)式進(jìn)行篩選。
HTML 代碼:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>jQuery 代碼:
$("div").siblings()結(jié)果:
[ <p>Hello</p>, <p>And Again</p> ]實(shí)例效果就是點(diǎn)擊按鈕，實(shí)現(xiàn)圖片的切換效果。左右移動(dòng)。
html代碼如下：
<body><div class="v_show"><div class="v_caption"><h2 class="cartoon" title="卡通動(dòng)漫">卡通動(dòng)漫</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" >上一頁(yè)</span><span class="next">下一頁(yè)</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夢(mèng)" /></a><h4><a href="#">哆啦A夢(mèng)</a></h4><span>播放:<em>33,326</em></span></li><li><a href="#"><img src="img/02.jpg" alt="哆啦A夢(mèng)" /></a><h4><a href="#">哆啦A夢(mèng)</a></h4><span>播放:<em>33,326</em></span></li><li><a href="#"><img src="img/02.jpg" alt="哆啦A夢(mèng)" /></a><h4><a href="#">哆啦A夢(mèng)</a></h4><span>播放:<em>33,326</em></span></li><li><a href="#"><img src="img/02.jpg" alt="哆啦A夢(mèng)" /></a><h4><a href="#">哆啦A夢(mèng)</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代碼部分：
<script type="text/javascript"> $(function(){var page = 1;var i = 4; //每版放4個(gè)圖片//向后 按鈕$("span.next").click(function(){ //綁定click事件var $parent = $(this).parents("div.v_show");//根據(jù)當(dāng)前點(diǎn)擊元素獲取到父元素var $v_show = $parent.find("div.v_content_list"); //尋找到“視頻內(nèi)容展示區(qū)域”var $v_content = $parent.find("div.v_content"); //尋找到“視頻內(nèi)容展示區(qū)域”外圍的DIV元素var v_width = $v_content.width() ;var len = $v_show.find("li").length;var page_count = Math.ceil(len / i) ; //只要不是整數(shù)，就往大的方向取最小的整數(shù)if( !$v_show.is(":animated") ){ //判斷“視頻內(nèi)容展示區(qū)域”是否正在處于動(dòng)畫(huà)if( page == page_count ){ //已經(jīng)到最后一個(gè)版面了,如果再向后，必須跳轉(zhuǎn)到第一個(gè)版面。$v_show.animate({ left : '0px'}, "slow"); //通過(guò)改變left值，跳轉(zhuǎn)到第一個(gè)版面page = 1;}else{$v_show.animate({ left : '-='+v_width }, "slow"); //通過(guò)改變left值，達(dá)到每次換一個(gè)版面page++;}}$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");});//往前 按鈕$("span.prev").click(function(){var $parent = $(this).parents("div.v_show");//根據(jù)當(dāng)前點(diǎn)擊元素獲取到父元素var $v_show = $parent.find("div.v_content_list"); //尋找到“視頻內(nèi)容展示區(qū)域”var $v_content = $parent.find("div.v_content"); //尋找到“視頻內(nèi)容展示區(qū)域”外圍的DIV元素var v_width = $v_content.width();var len = $v_show.find("li").length;var page_count = Math.ceil(len / i) ; //只要不是整數(shù)，就往大的方向取最小的整數(shù)if( !$v_show.is(":animated") ){ //判斷“視頻內(nèi)容展示區(qū)域”是否正在處于動(dòng)畫(huà)if( page == 1 ){ //已經(jīng)到第一個(gè)版面了,如果再向前，必須跳轉(zhuǎn)到最后一個(gè)版面。$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");page = page_count;}else{$v_show.animate({ left : '+='+v_width }, "slow");page--;}}//改變數(shù)字的樣式，先是添加，然后去除，這里是有順序的。$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");}); });</script>
總結(jié)
以上是生活随笔為你收集整理的jQuery滑动效果实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 用策略屏蔽135 139 445 338
- 下一篇： Redis五大数据结构