響應式web設計可以讓web頁面自適應各種尺寸的螢幕,儼然已經成為了當今web設計趨勢。本文將介紹一款基於jquery的響應式內容滑動外掛程式以及如何使用這款外掛程式到你的web應用中,滿足各類web設計需求。
bxslider特性
1.充分響應各種裝置,適應各種螢幕;
2.支援多種滑動模式,水平、垂直以及淡入淡出效果;
4.支援觸控滑動;
5.支援firefox,chrome,safari,ios,android,ie7+
如何使用bxslider
rel="stylesheet"
type="text/css"
href="jquery.bxslider.css"
>
3、呼叫bxslider外掛程式,當頁面內容載入完時呼叫bxslider。
$(function());
這樣,乙個超酷的內容滑動效果就實現了,檢視演示demo,將瀏覽器視窗放大和縮小可以看到滑動內容會隨著瀏覽器視窗自動調整大小。bxslider提供了豐富的配置選項,可以設定不同引數滿足各種客戶需求,來看它的選項配置。
bxslider選項設定
bxslider提供了豐富的選項可配置,以下我們列出最主要也是最常用的選項設定。
引數描述
預設值mode
設定滑動模式,'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出
horizontal
speed
內容切換速度,數字,ms
500startslide
初始滑動位置,數字
0randomstart
隨機初始滑動位置
true
infiniteloop
迴圈滑動,如果設定為true時,則到最後滑動位置時會切換到初始位置
true
easing
切換動畫擴充套件,可以借助jquery easing 動畫效果擴充套件設定不同的切換動畫效果
null
captions
設定顯示標題,當滑動內容為時並設定屬性title,可以顯示標題
false
video
false
pager
設定是否顯示分頁,設定為true時,會在滑動內容下方顯示分頁圖示
true
controls
設定是否顯示上一副和下一幅按鈕
true
auto
設定是否自動滑動
false
pause
自動滑動時停留時間,數字,ms
4000
autohover
當滑鼠滑向滑動內容上時,是否暫停滑動
false
更多bxslider的選項設定,請參照bxslider官網:
**:helloweba.com
2013-06-04 20:53
標籤: 響應式滑動
響應式內容滑動外掛程式bxSlider
bxslider特性 1.充分響應各種裝置,適應各種螢幕 2.支援多種滑動模式,水平 垂直以及淡入淡出效果 4.支援觸控滑動 5.支援firefox,chrome,safari,ios,android,ie7 如何使用bxsliderrel stylesheet type text css href...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計,對於pc設計乙個layout,在螢幕寬高有調整時,使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少,網頁布局就按照當時寫 的布局來布置 對於移動裝置,單獨設計乙個布局,使用不同的網域名稱如wap...
jQuery滑動並響應事件
jquery滑動並開啟指定頁面 doctype html html head script src script script document ready function function script head body p 預設情況下,所有 html 元素的位置都是靜態的,並且無法移動。如需...