pemalam pengindahan bar skrol mudah alih jQuery iScroll.js Halaman 1/5_jquery

jQuery iScroll.js Mobile Scroll Bar Beautification Plug-in Halaman 1/5_jquery

Tapak web rasmi: http://cubiq.org/iscroll-5

demo:

Tatal muat semula: http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

demo 'Carousel'

iScroll sangat berkuasa , buat masa ini saya hanya menggunakannya untuk menyesuaikan bar skrol Berikut ialah pengenalan ringkas kepada penggunaan dan langkah berjaga-jaga iscrol apabila menyesuaikan bar skrol pada terminal mudah alih.

1 Penggunaan

iScroll memulakan elemen untuk ditatal dan tidak mengehadkan penggunaan iScroll masuk. satu muka surat bilangan elemen.

Apabila menggunakan iScroll, struktur pepohon DOM hendaklah cukup mudah, alih keluar teg yang tidak diperlukan dan elakkan sarang teg yang berlebihan.

1. Bahagian html

1.1 Struktur iScroll yang terbaik dan paling ringkas

<div id="wrapper">
<ul>
<li></li>
.....
</ul>
</div>

Dalam contoh ini, teg ul akan ditatal. iScroll mesti bekerjasama dengan pembungkus di luar kandungan skrol untuk berkuat kuasa.

1.2. Hanya elemen anak pertama dalam pembalut boleh ditatal

Oleh kerana hanya elemen anak pertama dalam pembalut boleh ditatal, jadi biarkan Untuk menatal berbilang elemen , penulisannya adalah seperti berikut:

<div id="wrapper">
<div id="scroller">
<ul>
<li></li>
...
</ul>
<ul>
<li></li>
...
</ul>
</div>
</div>

Elemen scroller boleh ditatal, walaupun ia mengandungi dua elemen ul.

2 bahagian panggilan js

2.1, gunakan acara onDomContentLoaded untuk melaksanakan penatalan

Berlaku untuk menatal kandungan yang hanya mengandungi teks dan gambar, dan semua gambar mempunyai saiz tetap

<script src="iscroll.js"></script>
<script>
var myscroll; //myscroll是全局变量，可以在任意地方调用
function loaded(){
myscroll=new iScroll("wrapper");
} window.addEventListener("DOMContentLoaded",loaded,false);
</script>

2.2 Gunakan acara onLoad untuk melaksanakan penatalan

Kerana DOMContentLoaded. Acara akan dipanggil selepas struktur DOM dimuatkan, jadi panjang dan lebar kawasan skrol mungkin tidak ditentukan sebelum elemen seperti gambar dimuatkan Dalam kes ini, acara onLoad boleh digunakan untuk mencapai ini.

<script src="iscroll.js"><script>
<script>
var myscroll;
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
}，100 );
}
window.addEventListener("load",loaded,false);
</script>

Dalam kes ini, iScroll akan dimulakan 100ms selepas sumber halaman (termasuk imej) dimuatkan Ini sepatutnya menjadi cara yang lebih selamat untuk memanggil iScroll.

2.3. Pemuatan bar tatal dalam bingkai pop timbul

Bingkai pop timbul biasanya dilaksanakan dengan menukar antara paparan:tiada dan paparan:blok.

Pelayar elemen dengan paparan:tiada tidak dipaparkan, jadi ketinggian kandungan menatal tidak boleh dikira.

Jadi selepas kotak pop timbul memanggil show() untuk memaparkannya, kawasan bar skrol dijadikan instantiated. Seperti berikut:

$("#mobile_show_duobao_all_num").show();
new iScroll('tc-wrapper2', {
scrollbarClass: 'myScrollbar' ,
hScrollbar:false,
vScroll:true,
hideScrollbar: false //是否隐藏滚动条 
});

Petua: Apabila skrin gelongsor muncul, masalah keserasian bagi keseluruhan halaman gelongsor adalah seperti berikut:

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

2.4. Parameter lulus iScroll

Parameter kedua dalam iScroll membolehkan anda menyesuaikan beberapa kandungan, seperti sama ada untuk menyembunyikan bar skrol, dsb. Parameter yang biasa digunakan adalah seperti berikut:

hTatal palsu nyahdayakan tatal mendatar benar tatal mendatar lalai kepada benar

vTatal palsu tatal halus tegak lalai tatal menegak benar kepada benar
hTatal bar palsu menyembunyikan bar tatal dalam arah mendatar
vScrollbar false menyembunyikan bar skrol dalam arah menegak
fixedScrollbar Pada iOS, apabila elemen diseret melepasi sempadan skrol, bar skrol akan mengecil. Menetapkannya kepada benar boleh menghalang skrol bar daripada melebihi sempadan
kawasan Kelihatan. Lalai adalah benar pada Android, palsu pada iOS
fadeScrollbar false Menentukan untuk menyembunyikan bar skrol apabila tiada kesan pudar
hideScrollbar Sembunyikan bar skrol apabila tiada interaksi pengguna Lalai adalah benar
lantun Dayakan atau lumpuhkan Lantun sempadan, lalai adalah benar
momentum Dayakan atau lumpuhkan inersia, lalai adalah benar, parameter ini sangat berguna apabila anda ingin menyimpan sumber
lockDirection false membatalkan kunci arah seretan, seretan benar hanya boleh berada dalam satu arah Atas (atas/bawah atau kiri/kanan)

2.5, kaedah umum

refresh Kaedah ini harus dipanggil apabila pokok DOM berubah

cth: setTimeout(fungsi () { myScroll.refresh(); }, 0);

3. style Tambah parameter kelas pada bar, seperti berikut

Bar skrol terdiri daripada dua elemen: bekas dan paparan. Bekas adalah sama tinggi dengan pembungkus, dan paparan mewakili bar skrol itu sendiri.

var myscroll=new iScroll("wrapper",{
　　scrollbarClass: "myScrollbar"
});

hasil html adalah seperti berikut:

css adalah seperti berikut, anda boleh mengubah suainya sendiri:

<div class="myScrollbarV">
<div></div>
</div>

Contoh

@charset "utf-8";
/* CSS Document */
/**
*
* Horizontal Scrollbar
*
*/
.myScrollbarH {
position:absolute;
z-index:100;
height:8px;
bottom:1px;
left:2px;
right:7px
}
.myScrollbarH > div {
position:absolute;
z-index:100;
height:100%;
/* The following is probably what you want to customize */
background-image:-webkit-gradient(linear, 0 0, 100% 0, from(#a00), to(#f00));
background-image:-moz-linear-gradient(top, #f00, #900);
background-image:-o-linear-gradient(top, #f00, #900);
border:1px solid #900;
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
-o-background-clip:padding-box;
background-clip:padding-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-o-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}
/**
*
* Vertical Scrollbar
*
*/
.myScrollbarV {
position:absolute;
z-index:100;
width:8px;bottom:7px;top:2px;right:1px
}
.myScrollbarV > div {
position:absolute;
z-index:100;
width:100%;
/* The following is probably what you want to customize */
background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
background-image:-moz-linear-gradient(top, #f00, #900);
background-image:-o-linear-gradient(top, #f00, #900);
border:1px solid #900;
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
-o-background-clip:padding-box;
background-clip:padding-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-o-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}

1. html+js

iScroll.js

/*!
* iScroll v4.2.5 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org
* Released under MIT license, http://cubiq.org/license
*/
(function(window, doc){
var m = Math,
dummyStyle = doc.createElement('div').style,
vendor = (function () {
var vendors = 't,webkitT,MozT,msT,OT'.split(','),
t,
i = 0,
l = vendors.length;
for ( ; i < l; i++ ) {
t = vendors[i] + &#39;ransform&#39;;
if ( t in dummyStyle ) {
return vendors[i].substr(0, vendors[i].length - 1);
}
}
return false;
})(),
cssVendor = vendor ? &#39;-&#39; + vendor.toLowerCase() + &#39;-&#39; : &#39;&#39;,
// Style properties
transform = prefixStyle(&#39;transform&#39;),
transitionProperty = prefixStyle(&#39;transitionProperty&#39;),
transitionDuration = prefixStyle(&#39;transitionDuration&#39;),
transformOrigin = prefixStyle(&#39;transformOrigin&#39;),
transitionTimingFunction = prefixStyle(&#39;transitionTimingFunction&#39;),
transitionDelay = prefixStyle(&#39;transitionDelay&#39;),
// Browser capabilities
isAndroid = (/android/gi).test(navigator.appVersion),
isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
has3d = prefixStyle(&#39;perspective&#39;) in dummyStyle,
hasTouch = &#39;ontouchstart&#39; in window && !isTouchPad,
hasTransform = vendor !== false,
hasTransitionEnd = prefixStyle(&#39;transition&#39;) in dummyStyle,
RESIZE_EV = &#39;onorientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;,
START_EV = hasTouch ? &#39;touchstart&#39; : &#39;mousedown&#39;,
MOVE_EV = hasTouch ? &#39;touchmove&#39; : &#39;mousemove&#39;,
END_EV = hasTouch ? &#39;touchend&#39; : &#39;mouseup&#39;,
CANCEL_EV = hasTouch ? &#39;touchcancel&#39; : &#39;mouseup&#39;,
TRNEND_EV = (function () {
if ( vendor === false ) return false;
var transitionEnd = {
&#39;&#39; : &#39;transitionend&#39;,
&#39;webkit&#39; : &#39;webkitTransitionEnd&#39;,
&#39;Moz&#39; : &#39;transitionend&#39;,
&#39;O&#39; : &#39;otransitionend&#39;,
&#39;ms&#39; : &#39;MSTransitionEnd&#39;
};
return transitionEnd[vendor];
})(),
nextFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) { return setTimeout(callback, 1); };
})(),
cancelFrame = (function () {
return window.cancelRequestAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout;
})(),
// Helpers
translateZ = has3d ? &#39; translateZ(0)&#39; : &#39;&#39;,
// Constructor
iScroll = function (el, options) {
var that = this,
i;
that.wrapper = typeof el == &#39;object&#39; ? el : doc.getElementById(el);
that.wrapper.style.overflow = &#39;hidden&#39;;
that.scroller = that.wrapper.children[0];
// Default options
that.options = {
hScroll: true,
vScroll: true,
x: 0,
y: 0,
bounce: true,
bounceLock: false,
momentum: true,
lockDirection: true,
useTransform: true,
useTransition: false,
topOffset: 0,
checkDOMChanges: false, // Experimental
handleClick: true,
// Scrollbar
hScrollbar: true,
vScrollbar: true,
fixedScrollbar: isAndroid,
hideScrollbar: isIDevice,
fadeScrollbar: isIDevice && has3d,
scrollbarClass: &#39;&#39;,
// Zoom
zoom: false,
zoomMin: 1,
zoomMax: 4,
doubleTapZoom: 2,
wheelAction: &#39;scroll&#39;,
// Snap
snap: false,
snapThreshold: 1,
// Events
onRefresh: null,
onBeforeScrollStart: function (e) { e.preventDefault(); },
onScrollStart: null,
onBeforeScrollMove: null,
onScrollMove: null,
onBeforeScrollEnd: null,
onScrollEnd: null,
onTouchEnd: null,
onDestroy: null,
onZoomStart: null,
onZoom: null,
onZoomEnd: null
};
// User defined options
for (i in options) that.options[i] = options[i];
// Set starting position
that.x = that.options.x;
that.y = that.options.y;
// Normalize options
that.options.useTransform = hasTransform && that.options.useTransform;
that.options.hScrollbar = that.options.hScroll && that.options.hScrollbar;
that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar;
that.options.zoom = that.options.useTransform && that.options.zoom;
that.options.useTransition = hasTransitionEnd && that.options.useTransition;
// Helpers FIX ANDROID BUG!
// translate3d and scale doesn&#39;t work together!
// Ignoring 3d ONLY WHEN YOU SET that.options.zoom
if ( that.options.zoom && isAndroid ){
translateZ = &#39;&#39;;
}
// Set some default styles
that.scroller.style[transitionProperty] = that.options.useTransform ? cssVendor + &#39;transform&#39; : &#39;top left&#39;;
that.scroller.style[transitionDuration] = &#39;0&#39;;
that.scroller.style[transformOrigin] = &#39;0 0&#39;;
if (that.options.useTransition) that.scroller.style[transitionTimingFunction] = &#39;
cubic-bezier(0.33,0.66,0.66,1)&#39;;
if (that.options.useTransform) that.scroller.style[transform] 
= &#39;translate(&#39; + that.x + &#39;px,&#39; + that.y + &#39;px)&#39; + translateZ;
else that.scroller.style.cssText += &#39;;position:absolute;top:&#39; + that.y + &#39;px;left:&#39; + that.x + &#39;px&#39;;
if (that.options.useTransition) that.options.fixedScrollbar = true;
that.refresh();
that._bind(RESIZE_EV, window);
that._bind(START_EV);
if (!hasTouch) {
if (that.options.wheelAction != &#39;none&#39;) {
that._bind(&#39;DOMMouseScroll&#39;);
that._bind(&#39;mousewheel&#39;);
}
}
if (that.options.checkDOMChanges) that.checkDOMTime = setInterval(function () {
that._checkDOMChanges();
}, 500);
};
// Prototype
iScroll.prototype = {
enabled: true,
x: 0,
y: 0,
steps: [],
scale: 1,
currPageX: 0, currPageY: 0,
pagesX: [], pagesY: [],
aniTime: null,
wheelZoomCount: 0,
handleEvent: function (e) {
var that = this;
switch(e.type) {
case START_EV:
if (!hasTouch && e.button !== 0) return;
that._start(e);
break;
case MOVE_EV: that._move(e); break;
case END_EV:
case CANCEL_EV: that._end(e); break;
case RESIZE_EV: that._resize(); break;
case &#39;DOMMouseScroll&#39;: case &#39;mousewheel&#39;: that._wheel(e); break;
case TRNEND_EV: that._transitionEnd(e); break;
}
},
_checkDOMChanges: function () {
if (this.moved || this.zoomed || this.animating ||
(this.scrollerW == this.scroller.offsetWidth 
* this.scale && this.scrollerH == this.scroller.offsetHeight * this.scale)) return;
this.refresh();
},
_scrollbar: function (dir) {
var that = this,
bar;
if (!that[dir + &#39;Scrollbar&#39;]) {
if (that[dir + &#39;ScrollbarWrapper&#39;]) {
if (hasTransform) that[dir + &#39;ScrollbarIndicator&#39;].style[transform] = &#39;&#39;;
that[dir + &#39;ScrollbarWrapper&#39;].parentNode.removeChild(that[dir + &#39;ScrollbarWrapper&#39;]);
that[dir + &#39;ScrollbarWrapper&#39;] = null;
that[dir + &#39;ScrollbarIndicator&#39;] = null;
}
return;
}
if (!that[dir + &#39;ScrollbarWrapper&#39;]) {
// Create the scrollbar wrapper
bar = doc.createElement(&#39;div&#39;);
if (that.options.scrollbarClass) bar.className = that.options.scrollbarClass + dir.toUpperCase();
else bar.style.cssText = &#39;position:absolute;z-index:100;&#39; + (dir == &#39;h&#39; ? &#39;height:7px;bottom:1px;
left:2px;right:&#39; + (that.vScrollbar ? &#39;7&#39; : &#39;2&#39;) + &#39;px&#39; : &#39;width:7px;bottom:&#39; + 
(that.hScrollbar ? &#39;7&#39; : &#39;2&#39;) + &#39;px;top:2px;right:1px&#39;);
bar.style.cssText += &#39;;pointer-events:none;&#39; + cssVendor + &#39;transition-property:opacity;&#39; + 
cssVendor + &#39;transition-duration:&#39; + (that.options.fadeScrollbar ? &#39;350ms&#39; : &#39;0&#39;) + &#39;;
overflow:hidden;opacity:&#39; + (that.options.hideScrollbar ? &#39;0&#39; : &#39;1&#39;);
that.wrapper.appendChild(bar);
that[dir + &#39;ScrollbarWrapper&#39;] = bar;
// Create the scrollbar indicator
bar = doc.createElement(&#39;div&#39;);
if (!that.options.scrollbarClass) {
bar.style.cssText = &#39;position:absolute;z-index:100;background:rgba(0,0,0,0.5);
border:1px solid rgba(255,255,255,0.9);&#39; + cssVendor + &#39;background-clip:padding-box;&#39; + cssVendor + 
&#39;box-sizing:border-box;&#39; + (dir == &#39;h&#39; ? &#39;height:100%&#39; : &#39;width:100%&#39;) + &#39;;&#39; +
 cssVendor + &#39;border-radius:3px;border-radius:3px&#39;;
}
bar.style.cssText += &#39;;pointer-events:none;&#39; + cssVendor + &#39;transition-property:&#39; +
 cssVendor + &#39;transform;&#39; + cssVendor + &#39;transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);&#39;
  + cssVendor + &#39;transition-duration:0;&#39; + cssVendor + &#39;transform: translate(0,0)&#39; + translateZ;
if (that.options.useTransition)
 bar.style.cssText += &#39;;&#39; + cssVendor + &#39;transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)&#39;;
that[dir + &#39;ScrollbarWrapper&#39;].appendChild(bar);
that[dir + &#39;ScrollbarIndicator&#39;] = bar;
}
if (dir == &#39;h&#39;) {
that.hScrollbarSize = that.hScrollbarWrapper.clientWidth;
that.hScrollbarIndicatorSize = m.max(m.round(that.hScrollbarSize * that.hScrollbarSize / that.scrollerW), 8);
that.hScrollbarIndicator.style.width = that.hScrollbarIndicatorSize + &#39;px&#39;;
that.hScrollbarMaxScroll = that.hScrollbarSize - that.hScrollbarIndicatorSize;
that.hScrollbarProp = that.hScrollbarMaxScroll / that.maxScrollX;
} else {
that.vScrollbarSize = that.vScrollbarWrapper.clientHeight;
that.vScrollbarIndicatorSize = m.max(m.round(that.vScrollbarSize * that.vScrollbarSize / that.scrollerH), 8);
that.vScrollbarIndicator.style.height = that.vScrollbarIndicatorSize + &#39;px&#39;;
that.vScrollbarMaxScroll = that.vScrollbarSize - that.vScrollbarIndicatorSize;
that.vScrollbarProp = that.vScrollbarMaxScroll / that.maxScrollY;
}
// Reset position
that._scrollbarPos(dir, true);
},
_resize: function () {
var that = this;
setTimeout(function () { that.refresh(); }, isAndroid ? 200 : 0);
},
_pos: function (x, y) {
if (this.zoomed) return;
x = this.hScroll ? x : 0;
y = this.vScroll ? y : 0;
if (this.options.useTransform) {
this.scroller.style[transform] = &#39;translate(&#39; + x + &#39;px,&#39; + y + &#39;px) scale(&#39; + this.scale + &#39;)&#39; + translateZ;
} else {
x = m.round(x);
y = m.round(y);
this.scroller.style.left = x + &#39;px&#39;;
this.scroller.style.top = y + &#39;px&#39;;
}
this.x = x;
this.y = y;
this._scrollbarPos(&#39;h&#39;);
this._scrollbarPos(&#39;v&#39;);
},
_scrollbarPos: function (dir, hidden) {
var that = this,
pos = dir == &#39;h&#39; ? that.x : that.y,
size;
if (!that[dir + &#39;Scrollbar&#39;]) return;
pos = that[dir + &#39;ScrollbarProp&#39;] * pos;
if (pos < 0) {
if (!that.options.fixedScrollbar) {
size = that[dir + &#39;ScrollbarIndicatorSize&#39;] + m.round(pos * 3);
if (size < 8) size = 8;
that[dir + &#39;ScrollbarIndicator&#39;].style[dir == &#39;h&#39; ? &#39;width&#39; : &#39;height&#39;] = size + &#39;px&#39;;
}
pos = 0;
} else if (pos > that[dir + &#39;ScrollbarMaxScroll&#39;]) {
if (!that.options.fixedScrollbar) {
size = that[dir + &#39;ScrollbarIndicatorSize&#39;] - m.round((pos - that[dir + &#39;ScrollbarMaxScroll&#39;]) * 3);
if (size < 8) size = 8;
that[dir + &#39;ScrollbarIndicator&#39;].style[dir == &#39;h&#39; ? &#39;width&#39; : &#39;height&#39;] = size + &#39;px&#39;;
pos = that[dir + &#39;ScrollbarMaxScroll&#39;] + (that[dir + &#39;ScrollbarIndicatorSize&#39;] - size);
} else {
pos = that[dir + &#39;ScrollbarMaxScroll&#39;];
}
}
that[dir + &#39;ScrollbarWrapper&#39;].style[transitionDelay] = &#39;0&#39;;
that[dir + &#39;ScrollbarWrapper&#39;].style.opacity = hidden && that.options.hideScrollbar ? &#39;0&#39; : &#39;1&#39;;
that[dir + &#39;ScrollbarIndicator&#39;].style[transform] 
= &#39;translate(&#39; + (dir == &#39;h&#39; ? pos + &#39;px,0)&#39; : &#39;0,&#39; + pos + &#39;px)&#39;) + translateZ;
},
_start: function (e) {
var that = this,
point = hasTouch ? e.touches[0] : e,
matrix, x, y,
c1, c2;
if (!that.enabled) return;
if (that.options.onBeforeScrollStart) that.options.onBeforeScrollStart.call(that, e);
if (that.options.useTransition || that.options.zoom) that._transitionTime(0);
that.moved = false;
that.animating = false;
that.zoomed = false;
that.distX = 0;
that.distY = 0;
that.absDistX = 0;
that.absDistY = 0;
that.dirX = 0;
that.dirY = 0;
// Gesture start
if (that.options.zoom && hasTouch && e.touches.length > 1) {
c1 = m.abs(e.touches[0].pageX-e.touches[1].pageX);
c2 = m.abs(e.touches[0].pageY-e.touches[1].pageY);
that.touchesDistStart = m.sqrt(c1 * c1 + c2 * c2);
that.originX = m.abs(e.touches[0].pageX + e.touches[1].pageX - that.wrapperOffsetLeft * 2) / 2 - that.x;
that.originY = m.abs(e.touches[0].pageY + e.touches[1].pageY - that.wrapperOffsetTop * 2) / 2 - that.y;
if (that.options.onZoomStart) that.options.onZoomStart.call(that, e);
}
if (that.options.momentum) {
if (that.options.useTransform) {
// Very lame general purpose alternative to CSSMatrix
matrix = getComputedStyle(that.scroller, null)[transform].replace(/[^0-9\-.,]/g, &#39;&#39;).split(&#39;,&#39;);
x = +(matrix[12] || matrix[4]);
y = +(matrix[13] || matrix[5]);
} else {
x = +getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, &#39;&#39;);
y = +getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, &#39;&#39;);
}
if (x != that.x || y != that.y) {
if (that.options.useTransition) that._unbind(TRNEND_EV);
else cancelFrame(that.aniTime);
that.steps = [];
that._pos(x, y);
if (that.options.onScrollEnd) that.options.onScrollEnd.call(that);
}
}
that.absStartX = that.x; // Needed by snap threshold
that.absStartY = that.y;
that.startX = that.x;
that.startY = that.y;
that.pointX = point.pageX;
that.pointY = point.pageY;
that.startTime = e.timeStamp || Date.now();
if (that.options.onScrollStart) that.options.onScrollStart.call(that, e);
that._bind(MOVE_EV, window);
that._bind(END_EV, window);
that._bind(CANCEL_EV, window);
},
_move: function (e) {
var that = this,
point = hasTouch ? e.touches[0] : e,
deltaX = point.pageX - that.pointX,
deltaY = point.pageY - that.pointY,
newX = that.x + deltaX,
newY = that.y + deltaY,
c1, c2, scale,
timestamp = e.timeStamp || Date.now();
if (that.options.onBeforeScrollMove) that.options.onBeforeScrollMove.call(that, e);
// Zoom
if (that.options.zoom && hasTouch && e.touches.length > 1) {
c1 = m.abs(e.touches[0].pageX - e.touches[1].pageX);
c2 = m.abs(e.touches[0].pageY - e.touches[1].pageY);
that.touchesDist = m.sqrt(c1*c1+c2*c2);
that.zoomed = true;
scale = 1 / that.touchesDistStart * that.touchesDist * this.scale;
if (scale < that.options.zoomMin) scale = 0.5 * that.options.zoomMin * Math.pow(2.0, 
scale / that.options.zoomMin);
else if (scale > that.options.zoomMax) scale = 2.0 * that.options.zoomMax * 
Math.pow(0.5, that.options.zoomMax / scale);
that.lastScale = scale / this.scale;
newX = this.originX - this.originX * that.lastScale + this.x,
newY = this.originY - this.originY * that.lastScale + this.y;
this.scroller.style[transform] = &#39;translate(&#39; + newX + &#39;px,&#39; + newY + &#39;px) scale(&#39; + scale + &#39;)&#39; + translateZ;
if (that.options.onZoom) that.options.onZoom.call(that, e);
return;
}
that.pointX = point.pageX;
that.pointY = point.pageY;
// Slow down if outside of the boundaries
if (newX > 0 || newX < that.maxScrollX) {
newX = that.options.bounce ? that.x + (deltaX / 2) : newX >= 0 || that.maxScrollX >= 0 ? 0 : that.maxScrollX;
}
if (newY > that.minScrollY || newY < that.maxScrollY) {
newY = that.options.bounce ? that.y + (deltaY / 2) : newY >= that.minScrollY || that.maxScrollY >= 0 ? 
that.minScrollY : that.maxScrollY;
}
that.distX += deltaX;
that.distY += deltaY;
that.absDistX = m.abs(that.distX);
that.absDistY = m.abs(that.distY);
if (that.absDistX < 6 && that.absDistY < 6) {
return;
}
// Lock direction
if (that.options.lockDirection) {
if (that.absDistX > that.absDistY + 5) {
newY = that.y;
deltaY = 0;
} else if (that.absDistY > that.absDistX + 5) {
newX = that.x;
deltaX = 0;
}
}
that.moved = true;
that._pos(newX, newY);
that.dirX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
that.dirY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
if (timestamp - that.startTime > 300) {
that.startTime = timestamp;
that.startX = that.x;
that.startY = that.y;
}
if (that.options.onScrollMove) that.options.onScrollMove.call(that, e);
},
_end: function (e) {
if (hasTouch && e.touches.length !== 0) return;
var that = this,
point = hasTouch ? e.changedTouches[0] : e,
target, ev,
momentumX = { dist:0, time:0 },
momentumY = { dist:0, time:0 },
duration = (e.timeStamp || Date.now()) - that.startTime,
newPosX = that.x,
newPosY = that.y,
distX, distY,
newDuration,
snap,
scale;
that._unbind(MOVE_EV, window);
that._unbind(END_EV, window);
that._unbind(CANCEL_EV, window);
if (that.options.onBeforeScrollEnd) that.options.onBeforeScrollEnd.call(that, e);
if (that.zoomed) {
scale = that.scale * that.lastScale;
scale = Math.max(that.options.zoomMin, scale);
scale = Math.min(that.options.zoomMax, scale);
that.lastScale = scale / that.scale;
that.scale = scale;
that.x = that.originX - that.originX * that.lastScale + that.x;
that.y = that.originY - that.originY * that.lastScale + that.y;
that.scroller.style[transitionDuration] = &#39;200ms&#39;;
that.scroller.style[transform] = &#39;translate(&#39; + that.x + &#39;px,&#39; + that.y + &#39;px) 
scale(&#39; + that.scale + &#39;)&#39; + translateZ;
that.zoomed = false;
that.refresh();
if (that.options.onZoomEnd) that.options.onZoomEnd.call(that, e);
return;
}
if (!that.moved) {
if (hasTouch) {
if (that.doubleTapTimer && that.options.zoom) {
// Double tapped
clearTimeout(that.doubleTapTimer);
that.doubleTapTimer = null;
if (that.options.onZoomStart) that.options.onZoomStart.call(that, e);
that.zoom(that.pointX, that.pointY, that.scale == 1 ? that.options.doubleTapZoom : 1);
if (that.options.onZoomEnd) {
setTimeout(function() {
that.options.onZoomEnd.call(that, e);
}, 200); // 200 is default zoom duration
}
} else if (this.options.handleClick) {
that.doubleTapTimer = setTimeout(function () {
that.doubleTapTimer = null;
// Find the last touched element
target = point.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != &#39;SELECT&#39; && target.tagName != &#39;INPUT&#39; && target.tagName != &#39;TEXTAREA&#39;) {
ev = doc.createEvent(&#39;MouseEvents&#39;);
ev.initMouseEvent(&#39;click&#39;, true, true, e.view, 1,
point.screenX, point.screenY, point.clientX, point.clientY,
e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
0, null);
ev._fake = true;
target.dispatchEvent(ev);
}
}, that.options.zoom ? 250 : 0);
}
}
that._resetPos(400);
if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
return;
}
if (duration < 300 && that.options.momentum) {
momentumX = newPosX ? that._momentum(newPosX - that.startX, duration, -that.x,
 that.scrollerW - that.wrapperW + that.x, that.options.bounce ? that.wrapperW : 0) : momentumX;
momentumY = newPosY ? that._momentum(newPosY - that.startY, duration, -that.y, 
(that.maxScrollY < 0 ? that.scrollerH - that.wrapperH + that.y - that.minScrollY : 0), that.options.bounce ? 
that.wrapperH : 0) : momentumY;
newPosX = that.x + momentumX.dist;
newPosY = that.y + momentumY.dist;
if ((that.x > 0 && newPosX > 0) || (that.x < that.maxScrollX && newPosX < that.maxScrollX))
 momentumX = { dist:0, time:0 };
if ((that.y > that.minScrollY && newPosY > that.minScrollY) || (that.y < that.maxScrollY && newPosY 
< that.maxScrollY)) momentumY = { dist:0, time:0 };
}
if (momentumX.dist || momentumY.dist) {
newDuration = m.max(m.max(momentumX.time, momentumY.time), 10);
// Do we need to snap?
if (that.options.snap) {
distX = newPosX - that.absStartX;
distY = newPosY - that.absStartY;
if (m.abs(distX) < that.options.snapThreshold && m.abs(distY) < that.options.snapThreshold) 
{ that.scrollTo(that.absStartX, that.absStartY, 200); }
else {
snap = that._snap(newPosX, newPosY);
newPosX = snap.x;
newPosY = snap.y;
newDuration = m.max(snap.time, newDuration);
}
}
that.scrollTo(m.round(newPosX), m.round(newPosY), newDuration);
if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
return;
}
// Do we need to snap?
if (that.options.snap) {
distX = newPosX - that.absStartX;
distY = newPosY - that.absStartY;
if (m.abs(distX) < that.options.snapThreshold && m.abs(distY) < that.options.snapThreshold) 
that.scrollTo(that.absStartX, that.absStartY, 200);
else {
snap = that._snap(that.x, that.y);
if (snap.x != that.x || snap.y != that.y) that.scrollTo(snap.x, snap.y, snap.time);
}
if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
return;
}
that._resetPos(200);
if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
},
_resetPos: function (time) {
var that = this,
resetX = that.x >= 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x,
resetY = that.y >= that.minScrollY || that.maxScrollY > 0 ? that.minScrollY : that.y 
< that.maxScrollY ? that.maxScrollY : that.y;
if (resetX == that.x && resetY == that.y) {
if (that.moved) {
that.moved = false;
if (that.options.onScrollEnd) that.options.onScrollEnd.call(that); // Execute custom code on scroll end
}
if (that.hScrollbar && that.options.hideScrollbar) {
if (vendor == &#39;webkit&#39;) that.hScrollbarWrapper.style[transitionDelay] = &#39;300ms&#39;;
that.hScrollbarWrapper.style.opacity = &#39;0&#39;;
}
if (that.vScrollbar && that.options.hideScrollbar) {
if (vendor == &#39;webkit&#39;) that.vScrollbarWrapper.style[transitionDelay] = &#39;300ms&#39;;
that.vScrollbarWrapper.style.opacity = &#39;0&#39;;
}
return;
}
that.scrollTo(resetX, resetY, time || 0);
},
_wheel: function (e) {
var that = this,
wheelDeltaX, wheelDeltaY,
deltaX, deltaY,
deltaScale;
if (&#39;wheelDeltaX&#39; in e) {
wheelDeltaX = e.wheelDeltaX / 12;
wheelDeltaY = e.wheelDeltaY / 12;
} else if(&#39;wheelDelta&#39; in e) {
wheelDeltaX = wheelDeltaY = e.wheelDelta / 12;
} else if (&#39;detail&#39; in e) {
wheelDeltaX = wheelDeltaY = -e.detail * 3;
} else {
return;
}
if (that.options.wheelAction == &#39;zoom&#39;) {
deltaScale = that.scale * Math.pow(2, 1/3 * (wheelDeltaY ? wheelDeltaY / Math.abs(wheelDeltaY) : 0));
if (deltaScale < that.options.zoomMin) deltaScale = that.options.zoomMin;
if (deltaScale > that.options.zoomMax) deltaScale = that.options.zoomMax;
if (deltaScale != that.scale) {
if (!that.wheelZoomCount && that.options.onZoomStart) that.options.onZoomStart.call(that, e);
that.wheelZoomCount++;
that.zoom(e.pageX, e.pageY, deltaScale, 400);
setTimeout(function() {
that.wheelZoomCount--;
if (!that.wheelZoomCount && that.options.onZoomEnd) that.options.onZoomEnd.call(that, e);
}, 400);
}
return;
}
deltaX = that.x + wheelDeltaX;
deltaY = that.y + wheelDeltaY;
if (deltaX > 0) deltaX = 0;
else if (deltaX < that.maxScrollX) deltaX = that.maxScrollX;
if (deltaY > that.minScrollY) deltaY = that.minScrollY;
else if (deltaY < that.maxScrollY) deltaY = that.maxScrollY;
if (that.maxScrollY < 0) {
that.scrollTo(deltaX, deltaY, 0);
}
},
_transitionEnd: function (e) {
var that = this;
if (e.target != that.scroller) return;
that._unbind(TRNEND_EV);
that._startAni();
},
/**
*
* Utilities
*
*/
_startAni: function () {
var that = this,
startX = that.x, startY = that.y,
startTime = Date.now(),
step, easeOut,
animate;
if (that.animating) return;
if (!that.steps.length) {
that._resetPos(400);
return;
}
step = that.steps.shift();
if (step.x == startX && step.y == startY) step.time = 0;
that.animating = true;
that.moved = true;
if (that.options.useTransition) {
that._transitionTime(step.time);
that._pos(step.x, step.y);
that.animating = false;
if (step.time) that._bind(TRNEND_EV);
else that._resetPos(0);
return;
}
animate = function () {
var now = Date.now(),
newX, newY;
if (now >= startTime + step.time) {
that._pos(step.x, step.y);
that.animating = false;
if (that.options.onAnimationEnd) that.options.onAnimationEnd.call(that); 
// Execute custom code on animation end
that._startAni();
return;
}
now = (now - startTime) / step.time - 1;
easeOut = m.sqrt(1 - now * now);
newX = (step.x - startX) * easeOut + startX;
newY = (step.y - startY) * easeOut + startY;
that._pos(newX, newY);
if (that.animating) that.aniTime = nextFrame(animate);
};
animate();
},
_transitionTime: function (time) {
time += &#39;ms&#39;;
this.scroller.style[transitionDuration] = time;
if (this.hScrollbar) this.hScrollbarIndicator.style[transitionDuration] = time;
if (this.vScrollbar) this.vScrollbarIndicator.style[transitionDuration] = time;
},
_momentum: function (dist, time, maxDistUpper, maxDistLower, size) {
var deceleration = 0.0006,
speed = m.abs(dist) / time,
newDist = (speed * speed) / (2 * deceleration),
newTime = 0, outsideDist = 0;
// Proportinally reduce speed if we are outside of the boundaries
if (dist > 0 && newDist > maxDistUpper) {
outsideDist = size / (6 / (newDist / speed * deceleration));
maxDistUpper = maxDistUpper + outsideDist;
speed = speed * maxDistUpper / newDist;
newDist = maxDistUpper;
} else if (dist < 0 && newDist > maxDistLower) {
outsideDist = size / (6 / (newDist / speed * deceleration));
maxDistLower = maxDistLower + outsideDist;
speed = speed * maxDistLower / newDist;
newDist = maxDistLower;
}
newDist = newDist * (dist < 0 ? -1 : 1);
newTime = speed / deceleration;
return { dist: newDist, time: m.round(newTime) };
},
_offset: function (el) {
var left = -el.offsetLeft,
top = -el.offsetTop;
while (el = el.offsetParent) {
left -= el.offsetLeft;
top -= el.offsetTop;
}
if (el != this.wrapper) {
left *= this.scale;
top *= this.scale;
}
return { left: left, top: top };
},
_snap: function (x, y) {
var that = this,
i, l,
page, time,
sizeX, sizeY;
// Check page X
page = that.pagesX.length - 1;
for (i=0, l=that.pagesX.length; i<l; i++) {
if (x >= that.pagesX[i]) {
page = i;
break;
}
}
if (page == that.currPageX && page > 0 && that.dirX < 0) page--;
x = that.pagesX
<div class="pagenum tc">当前1/5页 <strong>1</strong>
<a href="80039_2.htm">2</a>
<a href="80039_3.htm">3</a>
<a href="80039_4.htm">4</a>
<a href="80039_5.htm">5</a>
<a href="80039_2.htm">下一页</a>
<a href="80039_all.htm">阅读全文</a>
</div>

Di atas ialah jQuery iScroll.js mudah alih pemalam pengindahan bar skrol No. 1/ 5 halaman kandungan _jquery Untuk lebih banyak kandungan yang berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!