Menyadari efeknya:
Kode gaya CSS tidak ada.
Kode HTML:
jQuery.mobile and jQuery diimpor di halaman
Salinan kode adalah sebagai berikut:
<skrip src = "http://apps.bdimg.com/libs/jQuery/1.10.2/jquery.min.js"> </script>
<skrip src = "http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"> </script>
Salinan kode adalah sebagai berikut:
<Div id = "pageslide">
<input type = "tersembunyi" value = "" id = "captcha"/>
<Div id = "Slider">
<span id = "label"> </span>
<span id = "labletip"> slide untuk mengonfirmasi saya manusia! </span>
</div>
</div>
Kode JS:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
window.onload = function () {
var slider1 = slider baru ();
slider1.init ();
/// dipicu saat ukuran layar berubah
$ (window) .resize (function () {
slider1.handerin ();
slider1.handerout ();
});
}
// Sliding Bar Object
Fungsi Slider (SwipestArt, Min, Max, Index, ISOK, LableIndex) {
var _self = ini;
// beralih atau tidak
_self.swipestArt = swipestart;
// nilai minimum
_Self.min = min;
// nilai maksimum
_Self.max = maks;
// posisi slider saat ini
_self.index = index;
// apakah slide berhasil
_self.isok = isok;
// mouse berada di posisi tombol geser
_self.lableIndex = lableIndex;
}
// Inisialisasi
Slider.prototype.init = function () {
var _self = ini;
$ ("#label"). on ("mousedown", function (event) {
var e = event || window.event;
_Self.lableIndex = E.ClientX - this.offsetleft;
_self.handerin ();
});
$ ("#pageslide"). on ("mousemove", function (event) {
_Self.handermove (acara);
});
$ (dokumen) .on ("mouseup", function (event) {
_Self.handerout ();
});
$ ("#label"). on ("touchstart", function (event) {
var e = event || window.event;
_Self.lableIndex = e.originalevent.pagex - this.offsetleft;
_self.handerin ();
});
$ ("#pageslide"). on ("touchmove", function (event) {
_Self.Handermove (Event, "Mobile");
});
$ (dokumen) .on ("touchend", function (event) {
_Self.handerout ();
});
}
// mouse/jari menyentuh tombol geser
Slider.prototype.handerin = function () {
var _self = ini;
_self.swipestArt = true;
_Self.min = 0;
_Self.max = $ ("#Slider"). Width ();
}
// tikus/jari keluar
Slider.prototype.handerout = function () {
var _self = ini;
//berhenti
_Self.swipestArt = false;
_self.move ();
}
// gerakan tikus/jari
Slider.prototype.handermove = function (event, type) {
var _self = ini;
if (_self.swipestart) {
event.preventdefault ();
var event = event || window.event;
if (type == "seluler") {
_self.index = event.originalevent.pagex - _self.lableIndex;
} kalau tidak {
_Self.index = event.clientx - _self.lableIndex;
}
_self.move ();
}
}
// tikus/jari keluar
Slider.prototype.move = function () {
var _self = ini;
$ (". Warn"). Teks ("indeks:" + _self.index + ", max" + _self.max + ", lableIndex:" + _self.lableIndex + ", nilai:" + $ ("#captcha"). Val () + "Tanggal:" + Tanggal Baru (). GetUtCdate ());
if ((_self.index + 20)> = _self.max) {
_Self.Index = _Self.max - 20;
}
if (_self.index <0) {
_Self.Index = _Self.min;
}
$ (". Label"). CSS ("kiri", _self.index + "px");
if (_self.index == (_self.max - 20)) {
//berhenti
_Self.swipestArt = false;
_Self.isok = true; // Buka kunci
$ ("#captcha"). Val (1);
var style = {"filter": "alpha (opacity = 1)",
"-Moz-opacity": "1", "opacity": "1"}
$ (". UI-BTN.UI-INPUT-BTN.UI-CORNER-ALL.UI-Shadow"). CSS (Style);
$ ("#Slider"). CSS ("Latar Belakang", "#E5EE9F");
$ ("#lableTip"). Teks ("Terima kasih!");
} kalau tidak {
_Self.isok = false; // tidak terkunci
$ ("#captcha"). Val (0);
var style = {"filter": "alpha (opacity = 0,2)",
"-Moz-opacity": "0.2", "opacity": "0.2"}
$ (". UI-BTN.UI-INPUT-BTN.UI-CORNER-ALL.UI-Shadow"). CSS (Style);
$ ("#slider"). CSS ("latar belakang-warna", "#fdeb9c");
$ ("#lableTip"). Teks ("Slide untuk mengonfirmasi saya manusia!");
}
}
</script>
Efek direalisasikan: