如何進(jìn)行jQuery內(nèi)容滑動(dòng)特效插件的應(yīng)用,很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。

大概在一個(gè)多月前,我寫了一篇文章,大概介紹了jFlow內(nèi)容滑動(dòng)插件的應(yīng)用,有朋友問(wèn)我要求提供更多的樣式參考。關(guān)于jFlow基本應(yīng)用,大家可以參考前面我寫的文章:jFlow:jQuery內(nèi)容滑動(dòng)特效插件的應(yīng)用,本文是上篇文章的續(xù)集,主要介紹如何運(yùn)用CSS樣式來(lái)設(shè)計(jì)不同效果的滑動(dòng)界面。
主要介紹如何運(yùn)用CSS樣式來(lái)設(shè)計(jì)不同效果的滑動(dòng)界面。
介紹了三種效果的設(shè)計(jì):
Demo 1:小圓點(diǎn)導(dǎo)航、自動(dòng)切換
Demo 2:小圓點(diǎn)導(dǎo)航、方向按鈕切換
Demo 3:個(gè)性化切換
經(jīng)常上迅雷看看的網(wǎng)友,應(yīng)該對(duì)Demo 2很眼熟,迅雷看看網(wǎng)站在展示影片的時(shí)候就用到了這種滑動(dòng)效果,用來(lái)在有限的空間里展示更多的影片。Demo 1 和Demo 2就是從迅雷看看得到的啟發(fā),下面我們以Demo 2為例,講解設(shè)計(jì)過(guò)程。
<p class="demo">
<p id="myController">
<span class="j_prev"> </span>
<span class="jFlowControl"> </span>
<span class="jFlowControl"> </span>
<span class="jFlowControl"> </span>
<span class="j_next"> </span>
</p>
<p id="slides">
<p class="slide_wrap">
<p class="pro">
<a href="#" target="_blank"><img src="images/pic1.jpg" alt="" /><br/>
東莞市基源科技開發(fā)有限公司</a>
</p>
<p class="pro">
<a href="#" target="_blank"><img src="images/pic2.jpg" alt="" /><br/>
深圳市玫瑰石科技有限公司</a>
</p>
<p class="pro">
<a href="#" target="_blank"><img src="images/pic3.jpg" alt="" /><br/>
Angel mannequin</a>
</p>
</p>
...
</p>
</p>
說(shuō)明:...表示重復(fù)的p.slide_wrap,有幾條要滾動(dòng)的內(nèi)容就有幾個(gè)slide_wrap。
HTML DIV結(jié)構(gòu)示意圖如下:
.demo{width:680px; height:138px; border:1px solid #acc6e9; background:#fff;
margin:4px auto 20px auto; overflow:hidden}
.pro{float:left; width:210px; height:132px; margin:10px 0 6px 10px; text-align:center}
.pro img{width:200px; height:102px}
.pro a:hover{text-decoration:none; color:#f60}
#myController{height:42px; line-height:32px; z-index:1005; position:absolute;
margin-top:-30px; margin-left:540px}
#myController span{ padding:3px 9px; text-align:center; cursor:pointer;
background:url(images/arr_icon.gif) no-repeat}
#myController span.j_prev{background-position:4px -81px}
#myController span.j_next{background-position:4px -54px}
#myController span.jFlowControl4{background-position:4px -2px}
#myController span.jFlowSelected4 {background-position:4px -25px}
.demo是最外層DIV,包含整個(gè)滑動(dòng)內(nèi)容和導(dǎo)航控制條,設(shè)置它的寬度、高度、背景色和邊框。
.pro是控制滾動(dòng)內(nèi)容的每一個(gè)小圖片和圖片標(biāo)題的DIV,設(shè)置像左浮動(dòng),寬度、高度以及間距。
#myController是用來(lái)設(shè)置導(dǎo)航樣式的,設(shè)置絕對(duì)位置position:absolute,z-index值。給里面的span標(biāo)簽設(shè)置一個(gè)背景圖片arr_icon.gif,這張背景圖里有圓點(diǎn)和方向按鈕圖標(biāo),再通過(guò)span不同的class來(lái)設(shè)置背景圖不同的位置:background-position,這種方法只需要一次http請(qǐng)求,然后通過(guò)CSS來(lái)控制圖片的位置,提高了頁(yè)面效率。
加入JS代碼:
$(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl",
slideWrapper : "#jFlowSlide",
selectedWrapper: "jFlowSelected",
width: "680px",
height: "138px",
prev: ".j_prev",
next: ".j_next"
});
});
在任務(wù)完成之前別忘了將jquery庫(kù)和jFlow插件引用進(jìn)來(lái)。
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對(duì)創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,的支持。
網(wǎng)站名稱:如何進(jìn)行jQuery內(nèi)容滑動(dòng)特效插件的應(yīng)用-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于:http://chinadenli.net/article26/cepocg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)公司、全網(wǎng)營(yíng)銷推廣、服務(wù)器托管、營(yíng)銷型網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
移動(dòng)網(wǎng)站建設(shè)知識(shí)