Réalisez l'effet:
Le code de style CSS est absent.
Code html:
jquery.mobile et jquery sont importés sur la page
La copie de code est la suivante:
<script src = "http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"> </ script>
<script src = "http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"> </ script>
La copie de code est la suivante:
<div id = "pageslide">
<input type = "Hidden" value = "" id = "captcha" />
<div id = "Slider">
<span id = "label"> </span>
<span id = "labletip"> diapositive pour confirmer que je suis humain! </span>
</div>
</div>
Code js:
La copie de code est la suivante:
<script type = "text / javascript">
window.onload = function () {
var Slider1 = new Slider ();
Slider1.init ();
/// déclenché lorsque la taille de l'écran change
$ (fenêtre) .resize (function () {
Slider1.handerin ();
Slider1.Handerout ();
});
}
// objet de barre coulissante
Slière de fonction (swipestart, min, max, index, isok, lableIndex) {
var _self = this;
// commutateur ou non
_self.swipestart = swipestart;
// valeur minimale
_self.min = min;
// valeur maximale
_self.max = max;
// la position actuelle du curseur
_self.index = index;
// si la diapositive a réussi
_self.isok = Isok;
// La souris est en position du bouton de diapositive
_self.lableIndex = lableIndex;
}
// initialisation
Slider.prototype.init = function () {
var _self = this;
$ ("# label"). sur ("Mousedown", fonction (événement) {
var e = événement || window.event;
_self.lableIndex = e.clientx - this.offsetLeft;
_self.handerin ();
});
$ ("# pageslide"). sur ("MouseMove", fonction (événement) {
_self.Handemove (événement);
});
$ (document) .on ("MouseUp", fonction (événement) {
_self.handerout ();
});
$ ("# label"). sur ("touchstart", fonction (événement) {
var e = événement || window.event;
_self.lableIndex = e.originalevent.pagex - this.offsetLeft;
_self.handerin ();
});
$ ("# pageslide"). sur ("TouchMove", fonction (événement) {
_self.Handemove (événement, "mobile");
});
$ (document) .on ("Touchend", fonction (événement) {
_self.handerout ();
});
}
// souris / doigt touche le bouton coulissant
Slider.prototype.handerin = fonction () {
var _self = this;
_self.swipestart = true;
_self.min = 0;
_self.max = $ ("# Slider"). Width ();
}
// souris / doigt
Slider.prototype.handerout = function () {
var _self = this;
//arrêt
_self.swipestart = false;
_self.move ();
}
// Déplacement de souris / doigt
Slider.prototype.Handemove = fonction (événement, type) {
var _self = this;
if (_self.swipestart) {
event.PreventDefault ();
var event = événement || window.event;
if (type == "mobile") {
_self.index = event.originalevent.pagex - _self.lableIndex;
} autre {
_self.index = event.clientx - _self.lableIndex;
}
_self.move ();
}
}
// souris / doigt
Slider.prototype.move = function () {
var _self = this;
$ (". Warn"). Text ("index:" + _self.index + ", max" + _self.max + ", lableIndex:" + _elf.lableIndex + ", valeur:" + $ ("# captcha").
if ((_self.index + 20)> = _self.max) {
_self.index = _self.max - 20;
}
if (_self.index <0) {
_self.index = _self.min;
}
$ (". Label"). CSS ("Left", _self.index + "px");
if (_self.index == (_self.max - 20)) {
//arrêt
_self.swipestart = false;
_self.isok = true; // déverrouiller
$ ("# captcha"). Val (1);
var style = {"filtre": "alpha (opacity = 1)",
"-moz-opacity": "1", "opacité": "1"}
$ (". ui-btn.ui-inter-btn.ui-corner-all.ui-shadow"). css (style);
$ ("# Slider"). CSS ("Background-Color", "# E5EE9F");
$ ("# labletip"). text ("merci!");
} autre {
_self.isok = false; // déverrouillé
$ ("# captcha"). Val (0);
var style = {"filtre": "alpha (opacité = 0,2)",
"-moz-opacity": "0,2", "opacité": "0,2"}
$ (". ui-btn.ui-inter-btn.ui-corner-all.ui-shadow"). css (style);
$ ("# Slider"). CSS ("Background-Color", "# fdeb9c");
$ ("# labletip"). text ("Slide pour confirmer que je suis humain!");
}
}
</cript>
Les effets sont réalisés: