jQuery iScroll.js 移動(dòng)端滾動(dòng)條美化插件第3/5頁
更新時(shí)間:2016年02月25日 15:53:43 作者:starof
這篇文章主要介紹了jQuery iScroll.js 移動(dòng)端滾動(dòng)條美化插件的相關(guān)資料,需要的朋友可以參考下
;
sizeY = m.abs(y - that.pagesY[that.currPageY]);
sizeY = sizeY ? m.abs(that.y - y) / sizeY * 500 : 0;
that.currPageY = page;
// Snap with constant speed (proportional duration)
time = m.round(m.max(sizeX, sizeY)) || 200;
return { x: x, y: y, time: time };
},
_bind: function (type, el, bubble) {
(el || this.scroller).addEventListener(type, this, !!bubble);
},
_unbind: function (type, el, bubble) {
(el || this.scroller).removeEventListener(type, this, !!bubble);
},
/**
*
* Public methods
*
*/
destroy: function () {
var that = this;
that.scroller.style[transform] = '';
// Remove the scrollbars
that.hScrollbar = false;
that.vScrollbar = false;
that._scrollbar('h');
that._scrollbar('v');
// Remove the event listeners
that._unbind(RESIZE_EV, window);
that._unbind(START_EV);
that._unbind(MOVE_EV, window);
that._unbind(END_EV, window);
that._unbind(CANCEL_EV, window);
if (!that.options.hasTouch) {
that._unbind('DOMMouseScroll');
that._unbind('mousewheel');
}
if (that.options.useTransition) that._unbind(TRNEND_EV);
if (that.options.checkDOMChanges) clearInterval(that.checkDOMTime);
if (that.options.onDestroy) that.options.onDestroy.call(that);
},
refresh: function () {
var that = this,
offset,
i, l,
els,
pos = 0,
page = 0;
if (that.scale < that.options.zoomMin) that.scale = that.options.zoomMin;
that.wrapperW = that.wrapper.clientWidth || 1;
that.wrapperH = that.wrapper.clientHeight || 1;
that.minScrollY = -that.options.topOffset || 0;
that.scrollerW = m.round(that.scroller.offsetWidth * that.scale);
that.scrollerH = m.round((that.scroller.offsetHeight + that.minScrollY) * that.scale);
that.maxScrollX = that.wrapperW - that.scrollerW;
that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY;
that.dirX = 0;
that.dirY = 0;
if (that.options.onRefresh) that.options.onRefresh.call(that);
that.hScroll = that.options.hScroll && that.maxScrollX < 0;
that.vScroll = that.options.vScroll && (!that.options.bounceLock && !that.hScroll || that.scrollerH > that.wrapperH);
that.hScrollbar = that.hScroll && that.options.hScrollbar;
that.vScrollbar = that.vScroll && that.options.vScrollbar && that.scrollerH > that.wrapperH;
offset = that._offset(that.wrapper);
that.wrapperOffsetLeft = -offset.left;
that.wrapperOffsetTop = -offset.top;
// Prepare snap
if (typeof that.options.snap == 'string') {
that.pagesX = [];
that.pagesY = [];
els = that.scroller.querySelectorAll(that.options.snap);
for (i=0, l=els.length; i<l; i++) {
pos = that._offset(els[i]);
pos.left += that.wrapperOffsetLeft;
pos.top += that.wrapperOffsetTop;
that.pagesX[i] = pos.left < that.maxScrollX ? that.maxScrollX : pos.left * that.scale;
that.pagesY[i] = pos.top < that.maxScrollY ? that.maxScrollY : pos.top * that.scale;
}
} else if (that.options.snap) {
that.pagesX = [];
while (pos >= that.maxScrollX) {
that.pagesX
您可能感興趣的文章:
- jQuery中Nicescroll滾動(dòng)條插件的用法
- jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無滾動(dòng)條左右拖拽的方法
- jQuery niceScroll滾動(dòng)條錯(cuò)位問題的解決方法
- jquery滾動(dòng)條插件jScrollPane的使用介紹
- jQuery滾動(dòng)條插件nanoscroller使用指南
- 學(xué)習(xí)使用jquery iScroll.js移動(dòng)端滾動(dòng)條插件
- jquery滾動(dòng)條插件slimScroll使用方法
- jquery自定義滾動(dòng)條插件示例分享
- jquery滾動(dòng)條插件(可以自定義)
- jQuery leonaScroll 1.1 自定義滾動(dòng)條插件(推薦)
- jQuery滾動(dòng)條美化插件nicescroll簡(jiǎn)單用法示例
相關(guān)文章
jQuery實(shí)現(xiàn)的tab標(biāo)簽切換效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的tab標(biāo)簽切換效果,結(jié)合實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-09-0912款經(jīng)典的白富美型—jquery圖片輪播插件—前端開發(fā)必備
圖片輪播是網(wǎng)站中的常用功能,用于在有限的網(wǎng)頁空間內(nèi)展示一組產(chǎn)品圖片或者照片,同時(shí)還有非常吸引人的動(dòng)畫效果,本文向大家推薦12款實(shí)用的 jQuery 圖片輪播效果插件感興趣的朋友可以了解下哦2013-01-01jQuery插件實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)菜單效果
開發(fā)一個(gè)jQuery插件實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)菜單效果,實(shí)現(xiàn)步驟很詳細(xì),感興趣的小伙伴們可以參考一下2015-12-12Jquery Ajax的Get方式時(shí)需要注意URL地方
我們要時(shí)刻注意瀏覽器緩存, 當(dāng)使用GET方式時(shí)要添加時(shí)間戳參數(shù) (net Date()).getTime() 來保證每次發(fā)送的URL不同, 可以避免瀏覽器緩存.2011-04-04jquery.mousewheel實(shí)現(xiàn)整屏翻屏效果
jQuery Mousewheel 用于添加跨瀏覽器的鼠標(biāo)滾輪支持。 mousewheel事件的處理函數(shù)有一點(diǎn)小小的變化,它除了第一個(gè)參數(shù)event 外,還接收到第二個(gè)參數(shù)delta。通過參數(shù)delta可以獲取鼠標(biāo)滾輪的方向和速度。2015-08-08jQuery md5加密插件jQuery.md5.js用法示例
這篇文章主要介紹了jQuery md5加密插件jQuery.md5.js用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery md5加密插件jquery.md5.js的簡(jiǎn)單使用技巧,需要的朋友可以參考下2018-08-08基于JQuery及AJAX實(shí)現(xiàn)名人名言隨機(jī)生成器
這篇文章主要為大家詳細(xì)介紹了基于JQuery及AJAX實(shí)現(xiàn)名人名言隨機(jī)生成器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02