jQuery和hwSlider實現(xiàn)內(nèi)容響應(yīng)式可觸控滑動切換效果附源碼下載(二)
今天我們繼續(xù)內(nèi)容滑動切換效果的第二部分講解。如今我們的web開發(fā)都要適應(yīng)移動設(shè)備,就是說我們的web頁面要在移動設(shè)備如手機端也能正常訪問,所以我將第一部分的基本切換效果做了加強,增加了響應(yīng)式和觸控滑動效果。
本文是hwSlider-內(nèi)容滑動切換效果的第二部分,演示DEMO都是基于第一部分內(nèi)容的基礎(chǔ)上的,所以,如果您還沒閱讀過第一部分的話,請先移步參閱:基于jQuery和hwSlider實現(xiàn)內(nèi)容左右滑動切換效果附源碼下載(一)
響應(yīng)式
什么是響應(yīng)式設(shè)計,這里我就不描述了。在hwSlider中,我們通過CSS來設(shè)置滑塊的寬度和高度,設(shè)置了百分比的寬度。
#hwslider{width: 100%;height:auto;min-height: 120px;margin:40px auto; position: relative; overflow: hidden;} #hwslider ul{width: 100%; height:100%; position: absolute; z-index: 1} #hwslider ul li{display:none;position:absolute; left:0; top:0; width: 100%;height:100%; overflow: hidden;} #hwslider ul li.active{display: block;} #hwslider ul li img{max-width: 100%} #dots{position: absolute; bottom:20px; left:200px; min-width:60px; height: 12px; z-index: 2;} #dots span{float: left; width:12px;height: 12px; border: 1px solid #fff; border-radius: 50%; background: #333; margin-right: 8px; cursor: pointer;} #dots span.active{background:orangered} .arr{display:none;position: absolute; top: 140px; z-index: 2;width: 40px; height: 40px; line-height: 38px; text-align: center;; font-size: 36px; background: rgba(0,0,0,.3); color: #fff; text-decoration: none} .arr:hover{background: rgba(0,0,0,.7); text-decoration: none;} #hwslider:hover .arr{display: block; text-decoration: none;color: #fff} #prev{left: 20px} #next{right: 20px}
接下來,我們在js部分開始部分定義變量,在初始化resize()函數(shù)中,我們計算并定位導(dǎo)航圓點和導(dǎo)航箭頭的位置,并且在瀏覽器窗口大小調(diào)整的時候也調(diào)用resize()。
$(function(){ var slider = $("#hwslider"); var dots = $("#dots span"), prev = $("#prev"),next = $("#next"); var sliderInder = slider.children('ul') var hwsliderLi = sliderInder.children('li'); var hwsliderSize = hwsliderLi.length; //滑塊的總個數(shù) var sliderWidth = 600; //滑塊初始寬度 var sliderHeight = 320; //滑塊初始高度 var index = 1; //初始顯示第一個滑塊 var speed = 400; //滑動速度 var interval = 3000; //間隔時間 var dotShow = true; //是否顯示可切換的導(dǎo)航圓點 var autoPlay = false; //是否支持自動滑動 var clickable = true; //是否已經(jīng)點擊了滑塊在做滑動動畫 //初始化組件 var resize = function(){ var sWidth = slider.width(); var dotWidth = hwsliderSize*20; var dotOffset = (sWidth-dotWidth)/2; var sHeight = sliderHeight/sliderWidth*sWidth; slider.css('height',sHeight); $("#dots").css('left',dotOffset+'px'); //導(dǎo)航圓點位置 var arrOffset = (sHeight-40)/2; $(".arr").css('top',arrOffset+'px'); //導(dǎo)航箭頭位置 } resize(); $(window).resize(function(){ resize(); }); });
移動端觸屏滑動
在移動設(shè)備上,我們可以輕觸屏幕,并使用手勢滑動來切換滑塊。要實現(xiàn)這種效果,需要用到核心的touch事件。處理touch事件能跟蹤到屏幕滑動的每根手指。
以下是四種touch事件:
touchstart: 手指放到屏幕上時觸發(fā)
touchmove: 手指在屏幕上滑動式觸發(fā)
touchend: 手指離開屏幕時觸發(fā)
touchcancel: 系統(tǒng)取消touch事件的時候觸發(fā),這個好像比較少用
好,現(xiàn)在我們需要在滑塊上綁定偵聽touch觸控事件,在touchstart和touchend時分別獲取手指在屏幕滑塊上的位置,然后根據(jù)位移判斷是左滑還是右滑,然后調(diào)用moveTo()實現(xiàn)滑動切換。
var mouseX = 0, touchStartY = 0, touchStartX = 0; hwsliderLi.on({ //觸控開始 'touchstart': function(e) { touchStartY = e.originalEvent.touches[0].clientY; touchStartX = e.originalEvent.touches[0].clientX; }, //觸控結(jié)束 'touchend': function(e) { var touchEndY = e.originalEvent.changedTouches[0].clientY, touchEndX = e.originalEvent.changedTouches[0].clientX, yDiff = touchStartY - touchEndY, xDiff = touchStartX - touchEndX; if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) { if ( xDiff > 5 ) { if(index >= hwsliderSize){ index = 1; }else{ index += 1; } moveTo(index,'next'); } else { if(index == 1){ index = hwsliderSize; }else{ index -= 1; } moveTo(index,'prev'); } } touchStartY = null; touchStartX = null; }, //觸控移動 'touchmove': function(e) { if(e.preventDefault) { e.preventDefault(); } } });
再加上上一篇文章中的基本滑塊js代碼就能實現(xiàn)一個響應(yīng)式的可觸控滑動的內(nèi)容滑動效果。
如果要在PC上實現(xiàn)拖動滑動的話,需要綁定滑塊的onmousedown,onmousemove以及onmouseup事件,實現(xiàn)鼠標(biāo)按住拖動滑塊實現(xiàn)滑動切換,主要代碼這里就不貼出來了,大家可以下載源代碼中查看。
接下來的第三部分,我將給大家講解如何將現(xiàn)有的hwSlider代碼封裝成一個jQuery滑動插件成品,敬請關(guān)注。
- Android通過多點觸控的方式對圖片進(jìn)行縮放的實例代碼
- Android實現(xiàn)手指觸控圖片縮放功能
- cocos creator Touch事件應(yīng)用(觸控選擇多個子節(jié)點的實例)
- 微信小程序 觸控事件詳細(xì)介紹
- Android開發(fā)實例之多點觸控程序
- Android單點觸控實現(xiàn)圖片平移、縮放、旋轉(zhuǎn)功能
- Android多點觸控實現(xiàn)對圖片放大縮小平移,慣性滑動等功能
- unity實現(xiàn)多點觸控代碼
- jquery mobile的觸控點擊事件會多次觸發(fā)問題的解決方法
- CDC與BG-CDC的含義電容觸控學(xué)習(xí)整理
相關(guān)文章
JQuery WEUI Select 組件增加搜索欄示例demo
這篇文章主要介紹了JQuery WEUI Select 組件增加搜索欄示例demo,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10jquery清空input標(biāo)簽的值及清除標(biāo)簽里面的內(nèi)容
這篇文章主要介紹了jquery清空input標(biāo)簽的值,清除標(biāo)簽里面的內(nèi)容,清除input標(biāo)簽的值,可以通過直接將input標(biāo)簽的值設(shè)置為空來實現(xiàn),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10web的各種前端打印方法之jquery打印插件jqprint實現(xiàn)網(wǎng)頁打印
本文介紹JQuery插件Jqprint實現(xiàn)網(wǎng)頁打印,不懂的同學(xué)正可借此機會學(xué)習(xí)下,以備不時之需,話不多說,切入主題2013-01-01html、css和jquery相結(jié)合實現(xiàn)簡單的進(jìn)度條效果實例代碼
這篇文章主要介紹了html、css和jquery相結(jié)合實現(xiàn)簡單的進(jìn)度條效果的實例代碼,這個進(jìn)度條特別簡單,首先html里面的話就是一個div里面嵌套一個div,然后寫好想要的樣式就行了,具有一定的參考借鑒價值,感興趣的朋友一起看看吧2016-10-10基于MVC+EasyUI的web開發(fā)框架之使用云打印控件C-Lodop打印頁面或套打報關(guān)運單信息
這篇文章主要介紹了基于MVC+EasyUI的web開發(fā)框架之使用云打印控件C-Lodop打印頁面或套打報關(guān)運單信息的相關(guān)資料,非常不錯,需要的朋友可以參考下2016-08-08