jQuery iScroll.js plug-in d'embellissement de la barre de défilement mobile Page 1/5_jquery

JQuery iScroll.js Plug-in d'embellissement de la barre de défilement mobile Page 1/5_jquery

Site officiel : http://cubiq.org/iscroll-5

démo :

Actualisation du défilement : http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/

Démo 'Carrousel'

iScroll est très puissant, actuellement je ne l'utilise que pour personnaliser les barres de défilement. Voici une brève introduction à l'utilisation et aux précautions d'iscrol lors de la personnalisation des barres de défilement sur les terminaux mobiles.

1. Utilisation

iScroll initialise les éléments à faire défiler et ne limite pas l'utilisation d'iScroll dans une page le nombre d'éléments.

Lors de l'utilisation d'iScroll, la structure de l'arborescence DOM doit être assez simple, supprimer les balises inutiles et éviter une imbrication excessive des balises.

1. Partie HTML

1.1. La meilleure et la plus simple structure iScroll

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

Dans cet exemple, la balise ul défilera. iScroll doit coopérer avec le wrapper en dehors du contenu défilant pour prendre effet.

1.2. Seul le premier élément enfant du wrapper peut défiler.

Parce que seul le premier élément enfant du wrapper peut défiler, laissez donc faire défiler plusieurs éléments. , l'écriture est la suivante :

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

L'élément scroller peut défiler, même s'il contient deux éléments ul.

2. js appelant la partie

2.1, utilisez l'événement onDomContentLoaded pour implémenter le défilement

Applicable au contenu défilant qui contient uniquement du texte et des images, et toutes les images ont des tailles fixes

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

2.2 Utilisez l'événement onLoad pour implémenter le défilement

Parce que DOMContentLoaded. L'événement sera appelé après le chargement de la structure DOM, donc la longueur et la largeur de la zone de défilement ne peuvent pas être déterminées avant le chargement d'éléments tels que des images. Dans ce cas, l'événement onLoad peut être utilisé pour y parvenir.

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

Dans ce cas, iScroll sera initialisé 100 ms après le chargement des ressources de la page (y compris les images). Cela devrait être un moyen plus sûr d'appeler iScroll.

2.3. Chargement de la barre de défilement dans le cadre pop-up

Le cadre pop-up est généralement implémenté en basculant entre display:none et display:block.

Le navigateur d'éléments avec display:none n'est pas rendu, donc la hauteur du contenu défilant ne peut pas être calculée.

Ainsi, après que la boîte contextuelle appelle show() pour l'afficher, la zone de la barre de défilement est instanciée. Comme suit :

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

Astuce : Lorsque l'écran coulissant apparaît, le problème de compatibilité de l'ensemble de la page coulissante est le suivant :

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

2.4. iScroll passant les paramètres

Le deuxième paramètre d'iScroll vous permet de personnaliser certains contenus, par exemple s'il faut masquer le barre de défilement, etc. Les paramètres couramment utilisés sont les suivants :

hScroll false désactive le défilement horizontal vrai le défilement horizontal est par défaut vrai

vScroll faux défilement vertical délicat vrai le défilement vertical est par défaut vrai
hScrollbar false masque la barre de défilement dans le sens horizontal
vScrollbar false masque la barre de défilement dans le sens vertical
fixedScrollbar Sur iOS, lorsque l'élément est déplacé au-delà des limites du scroller, la barre de défilement se rétrécira. La définir sur true peut empêcher le défilement. barre de dépasser les limites de la
zone visible. La valeur par défaut est true sur Android, false sur iOS
fadeScrollbar false Spécifie de masquer la barre de défilement lorsqu'il n'y a pas d'effet de fondu
hideScrollbar Masquer la barre de défilement lorsqu'il n'y a pas d'interaction utilisateur La valeur par défaut est true
bounce Activer ou désactiver la frontière Bounce, la valeur par défaut est true
momentum Active ou désactive l'inertie, la valeur par défaut est true, ce paramètre est très utile lorsque l'on souhaite économiser des ressources
lockDirection false annule le verrouillage de la direction du glisser, true ne traîne que dans une direction Haut (haut/bas ou gauche/droite)

2.5, méthode générale

refresh Cette méthode doit être appelée lorsque l'arborescence DOM change

par exemple : setTimeout(function () { myScroll.refresh(); }, 0);

3 La partie CSS

nécessite un défilement lors de la personnalisation de la barre de défilement. style Ajoutez un paramètre de classe à la barre, comme suit

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

La barre de défilement est composée de deux éléments : le conteneur et l'affichage. Le conteneur a la même hauteur que le wrapper et l'affichage représente la barre de défilement elle-même.

les résultats html sont les suivants :

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

css est le suivant, vous pouvez le modifier vous-même :

@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);
}

Exemple

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>

Ce qui précède est le mobile jQuery iScroll.js Plug-in d'embellissement de la barre de défilement n° 1/ 5 pages de contenu jquery Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !