jQuery iScroll.js 移動(dòng)端滾動(dòng)條美化插件第3/5頁(yè)
更新時(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)圖片無(wú)滾動(dòng)條左右拖拽的方法
- jQuery niceScroll滾動(dòng)條錯(cuò)位問(wèn)題的解決方法
- 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í)，如：JQuery的dom操作，動(dòng)態(tài)創(chuàng)建dom節(jié)點(diǎn)，刪除節(jié)點(diǎn)，document方法等等，文章篇尾處附上實(shí)例小練習(xí)。需要的朋友可以參考下2016-12-12
jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼,通過(guò)自定義fixedMenu方法實(shí)現(xiàn)點(diǎn)擊下拉菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家分享了適應(yīng)手機(jī)端的jQuery圖片滑塊動(dòng)畫,不僅在PC瀏覽器上可以使用，而且更適合在手機(jī)端的網(wǎng)頁(yè)中使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jQuery實(shí)現(xiàn)圖片向左向右切換效果的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)圖片向左向右切換效果的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
這篇文章主要介紹了7個(gè)有用的jQuery技巧分享,本文給出了在新窗口打開鏈接、設(shè)置等高的列、jQuery預(yù)加載圖像、禁用鼠標(biāo)右鍵、設(shè)定計(jì)時(shí)器等實(shí)用代碼片段,需要的朋友可以參考下2015-05-05
jQuery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
jQuery Tools tooltip使用說(shuō)明
老規(guī)矩，先上html和css,還是用官方的，只是去掉了些東西2012-07-07
jQuery動(dòng)態(tài)添加與刪除tr行實(shí)例代碼
最近由于項(xiàng)目的需要，需要?jiǎng)討B(tài)的添加和刪除table中的tr，感覺用JS可以實(shí)現(xiàn)，但是在網(wǎng)上找了一下，單純的自己寫JS，感覺太麻煩，而且也不好維護(hù)。于是想到了最近學(xué)的jQuery。這篇文章給大家用實(shí)例介紹了jQuery動(dòng)態(tài)添加與刪除tr行的方法，有需要的朋友們可以參考借鑒。2016-10-10
jquery.uploadifive插件怎么解決上傳限制圖片或文件大小問(wèn)題
jQuery.uploadifive插件可以很好的解決上傳限制圖片或文件大小問(wèn)題,具體實(shí)例代碼大家參考下本文2017-05-05
jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止
這篇文章主要介紹了jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止的方法,需要的朋友可以參考下2014-04-04