Den Effekt erkennen:
Der CSS -Style -Code fehlt.
HTML -Code:
JQuery.Mobile und JQuery werden auf der Seite importiert
Die Codekopie lautet wie folgt:
<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>
Die Codekopie lautet wie folgt:
<div id = "pageslide">
<Eingabe type = "Hidden" value = "" id = "captcha"/>
<div id = "Slider">
<span id = "label"> </span>
<span id = "labletip"> Folie, um zu bestätigen, dass ich ein Mensch bin! </span>
</div>
</div>
JS -Code:
Die Codekopie lautet wie folgt:
<script type = "text/javaScript">
window.onload = function () {
var Slider1 = neuer Slider ();
Slider1.init ();
/// ausgelöst, wenn sich die Bildschirmgröße ändert
$ (Fenster) .Resize (function () {
Slider1.Handerin ();
Slider1.Handerout ();
});
}
// Schiebebalken Objekt
Funktion Slider (Swipestart, Min, Max, Index, Isok, LableIndex) {
var _self = this;
// Schalten oder nicht
_self.swipestart = swipestart;
// Mindestwert
_self.min = min;
// Maximalwert
_self.max = max;
// die aktuelle Position des Schiebereglers
_self.index = index;
// Ob die Folie erfolgreich war
_self.isok = isok;
// Die Maus befindet sich in der Position der Schleifschaltfläche
_self.lableIndex = lableIndex;
}
//Initialisierung
Slider.Prototype.init = function () {
var _self = this;
$ ("#label"). On ("MouseDown", Funktion (Ereignis) {
var e = Ereignis || Fenster.Event;
_self.lableIndex = e.clientX - this.offsetLeft;
_self.handerin ();
});
$ ("#pageslide"). On ("Mousemove", Funktion (Ereignis) {
_self.Handermove (Ereignis);
});
$ (Dokument) .on ("Mauseup", Funktion (Ereignis) {
_self.handerout ();
});
$ ("#label"). On ("TouchStart", Funktion (Ereignis) {
var e = Ereignis || Fenster.Event;
_self.lableIndex = e.originaleVent.pagex - this.offsetLeft;
_self.handerin ();
});
$ ("#pageslide"). On ("TouchMove", Funktion (Ereignis) {
_self.Handermove (Ereignis, "mobil");
});
$ (Dokument) .on ("Touchend", Funktion (Ereignis) {
_self.handerout ();
});
}
// Maus/Finger berührt den Schiebetaste
Slider.Prototype.handerin = function () {
var _self = this;
_self.swipestart = true;
_self.min = 0;
_self.max = $ ("#Slider"). width ();
}
// Maus/Finger raus
Slider.Prototype.handerout = function () {
var _self = this;
//stoppen
_self.swipestart = false;
_self.move ();
}
// Maus/Fingerbewegung
Slider.Prototype.Handermove = Funktion (Ereignis, Typ) {
var _self = this;
if (_self.swipestart) {
Event.PreventDefault ();
var event = event || Fenster.Event;
if (type == "Mobile") {
_self.index = event.originaleVent.pagex - _self.lableIndex;
} anders {
_self.index = event.clientX - _self.lableIndex;
}
_self.move ();
}
}
// Maus/Finger raus
Slider.Prototype.move = function () {
var _self = this;
$ (". Warn"). Text ("Index:" + _self.index + ", max" + _self.max + ", lableIndex:" + _self.lableIndex + ", Wert:" + $ ("#captcha"). Val () + "Datum:" + new Date (). getutcdate ());
if ((_self.index + 20)> = _self.max) {
_self.index = _self.max - 20;
}
if (_self.index <0) {
_self.index = _self.min;
}
$ (". Label"). CSS ("links", _self.index + "px");
if (_self.index == (_self.max - 20)) {
//stoppen
_self.swipestart = false;
_self.isok = true; // entsperren
$ ("#captcha"). Val (1);
var style = {"filter": "alpha (opacity = 1)",
"-moz-opacity": "1", "Opazität": "1"}
$ (". UI-BTN.UI-INPUT-BTN.UI-CORNER-ALL.UI-SHADOW"). CSS (STYLE);
$ ("#Slider"). CSS ("Hintergrundfarbe", "#e5ee9f");
$ ("#labletip"). Text ("Danke!");
} anders {
_self.isok = false; // freigeschaltet
$ ("#captcha"). Val (0);
var style = {"filter": "alpha (opacity = 0,2)",
"-moz-opacity": "0,2", "Deckkraft": "0,2"}
$ (". UI-BTN.UI-INPUT-BTN.UI-CORNER-ALL.UI-SHADOW"). CSS (STYLE);
$ ("#Slider"). CSS ("Hintergrundfarbe", "#fdeb9c");
$ ("#labletip"). Text ("Folie, um zu bestätigen, dass ich ein Mensch bin!");
}
}
</script>
Effekte werden realisiert: