إدراك التأثير:
رمز نمط CSS غائب.
رمز HTML:
يتم استيراد jquery.mobile و jQuery على الصفحة
نسخة الكود كما يلي:
<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>
نسخة الكود كما يلي:
<div id = "pageslide">
<type type = "hidden" value = "" id = "captcha"/>
<div id = "slider">
<span id = "label"> </span>
<span id = "labletip"> شريحة للتأكيد على أنني إنساني! </span>
</div>
</div>
رمز JS:
نسخة الكود كما يلي:
<script type = "text/javaScript">
window.onload = function () {
var slider1 = new slider () ؛
slider1.init () ؛
/// التشغيل عندما يتغير حجم الشاشة
$ (window) .Resize (function () {
Slider1.Handerin () ؛
Slider1.Handerout () ؛
}) ؛
}
// شريط شريط الانزلاق
وظيفة منزلق الوظيفة (Swipestart ، Min ، Max ، Index ، ISOK ، LableIndex) {
var _self = هذا ؛
// التبديل أم لا
_self.swipestart = swipestart ؛
// الحد الأدنى للقيمة
_self.min = min ؛
// أقصى قيمة
_self.max = max ؛
// الموضع الحالي للمنزلق
_self.index = فهرس ؛
// ما إذا كانت الشريحة قد نجحت
_self.isok = isok ؛
// الماوس في موضع زر الشريحة
_self.lableIndex = lableIndex ؛
}
// التهيئة
slider.prototype.init = function () {
var _self = هذا ؛
$ ("#label"). على ("mousedown" ، وظيفة (الحدث) {
var e = event || window.event ؛
_self.lableIndex = e.clientx - this.offSetLeft ؛
_self.handerin () ؛
}) ؛
$ ("#pageslide"). على ("mousemove" ، وظيفة (الحدث) {
_self.handermove (الحدث) ؛
}) ؛
$ (وثيقة) .on ("Mouseup" ، وظيفة (حدث) {
_self.handerout () ؛
}) ؛
$ ("#label"). على ("TouchStart" ، وظيفة (حدث) {
var e = event || window.event ؛
_self.lableIndex = E.originalevent.pagex - this.offsetleft ؛
_self.handerin () ؛
}) ؛
$ ("#pageslide"). على ("touchmove" ، وظيفة (الحدث) {
_self.handermove (حدث ، "mobile") ؛
}) ؛
$ (وثيقة) .on ("Touchend" ، وظيفة (الحدث) {
_self.handerout () ؛
}) ؛
}
// الماوس/الإصبع يلمس الزر المنزلق
slider.prototype.handerin = function () {
var _self = هذا ؛
_self.swipestart = true ؛
_self.min = 0 ؛
_self.max = $ ("#slider"). width () ؛
}
// الماوس/الإصبع
slider.prototype.handerout = function () {
var _self = هذا ؛
//قف
_self.swipestart = false ؛
_self.move () ؛
}
// Mouse/Finger Move
slider.prototype.handermove = function (الحدث ، النوع) {
var _self = هذا ؛
if (_self.swipestart) {
Event.PreventDefault () ؛
var event = event || window.event ؛
if (type == "mobile") {
_self.index = event.originalevent.pagex - _self.lableIndex ؛
} آخر {
_self.index = event.clientx - _self.lableIndex ؛
}
_self.move () ؛
}
}
// الماوس/الإصبع
slider.prototype.move = function () {
var _self = هذا ؛
$ (". WARN"). النص ("الفهرس:" + _self.index + "، max" + _self.max + "، lableIndex:" + _self.lableIndex + "، القيمة:
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)) {
//قف
_self.swipestart = false ؛
_self.isok = true ؛ // فتح
$ ("#captcha"). val (1) ؛
var style = {"filter":
"-moz-opacity": "1" ، "التعتيم": "1"}
$ (".
$ ("#slider").
$ ("#labletip"). النص ("شكرًا لك!") ؛
} آخر {
_self.isok = false ؛ // inlocked
$ ("#captcha"). val (0) ؛
var style = {"filter": "alpha (عتامة = 0.2)" ،
"-moz-opacity": "0.2" ، "عتامة": "0.2"}
$ (".
$ ("#slider").
$ ("#labletip"). نص ("شريحة للتأكيد على أنني بشري!") ؛
}
}
</script>
تتحقق الآثار: