JavaScript ใช้ฟังก์ชันการปลดล็อคแบบเลื่อน

ตระหนักถึงผลกระทบ:

รหัสสไตล์ 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 = "hidden" value = "" id = "captcha"/>>

<div id = "ตัวเลื่อน">

<span id = "label"> </span>

<span id = "labletip"> เลื่อนเพื่อยืนยันว่าฉันเป็นมนุษย์! </span>

</div>

</div>

รหัส JS:

การคัดลอกรหัสมีดังนี้:

<script type = "text/javascript">

window.onload = function () {

var slider1 = ตัวเลื่อนใหม่ ();

Slider1.init ();

/// ทริกเกอร์เมื่อขนาดหน้าจอเปลี่ยนไป

$ (window) .resize (function () {

Slider1.handerin ();

Slider1.Handerout ();

-

-

// วัตถุแถบเลื่อน

ฟังก์ชั่นตัวเลื่อน (swipestart, min, max, index, isok, lableindex) {

var _self = this;

// สวิตช์หรือไม่

_self.swipestart = swipestart;

// ค่าต่ำสุด

_self.min = นาที;

// ค่าสูงสุด

_self.max = สูงสุด;

// ตำแหน่งปัจจุบันของตัวเลื่อน

_self.index = ดัชนี;

// ไม่ว่าสไลด์จะสำเร็จ

_self.isok = isok;

// เมาส์อยู่ในตำแหน่งของปุ่มสไลด์

_self.lableIndex = LableIndex;

-

// การเริ่มต้น

slider.prototype.init = function () {

var _self = this;

$ ("#label") บน ("Mousedown", ฟังก์ชั่น (เหตุการณ์) {

var e = เหตุการณ์ || window.event;

_self.lableIndex = e.clientx - this.offsetleft;

_self.handerin ();

-

$ ("#pageslide") บน ("Mousemove", ฟังก์ชั่น (เหตุการณ์) {

_self.handermove (เหตุการณ์);

-

$ (เอกสาร) .on ("Mouseup", ฟังก์ชั่น (เหตุการณ์) {

_self.handerout ();

-

$ ("#label") บน ("TouchStart", ฟังก์ชั่น (เหตุการณ์) {

var e = เหตุการณ์ || window.event;

_self.lableIndex = e.originalevent.pagex - this.offsetleft;

_self.handerin ();

-

$ ("#pageslide"). on ("touchmove", ฟังก์ชั่น (เหตุการณ์) {

_self.handermove (เหตุการณ์ "มือถือ");

-

$ (เอกสาร) .on ("touchend", ฟังก์ชั่น (เหตุการณ์) {

_self.handerout ();

-

-

// เมาส์/นิ้วสัมผัสปุ่มเลื่อน

slider.prototype.handerin = function () {

var _self = this;

_self.swipestart = true;

_self.min = 0;

_self.max = $ ("#slider"). width ();

-

// เมาส์/นิ้วออก

slider.prototype.handerout = function () {

var _self = this;

//หยุด

_self.swipestart = false;

_self.move ();

-

// การย้ายเมาส์/นิ้ว

slider.prototype.handermove = function (event, type) {

var _self = this;

ถ้า (_self.swipestart) {

Event.preventDefault ();

var event = เหตุการณ์ || window.event;

if (type == "มือถือ") {

_self.index = event.originalevent.pagex - _self.lableIndex;

} อื่น {

_self.index = event.clientx - _self.lableIndex;

-

_self.move ();

-

-

// เมาส์/นิ้วออก

slider.prototype.move = function () {

var _self = this;

$ (". เตือน") ข้อความ ("ดัชนี:" + _self.index + ", สูงสุด" + _self.max + ", lableIndex:" + _self.lableIndex + ", ค่า:" + $ ("#captcha"). val () + "วันที่:"

if ((_self.index + 20)> = _self.max) {

_self.index = _self.max - 20;

-

if (_self.index <0) {

_self.index = _self.min;

-

$ (". label"). css ("ซ้าย", _self.index + "px");

if (_self.index == (_self.max - 20)) {

//หยุด

_self.swipestart = false;

_self.isok = true; // ปลดล็อค

$ ("#captcha"). val (1);

var style = {"ตัวกรอง": "alpha (opacity = 1)"

"-moz-opacity": "1", "ความทึบ": "1"}

$ (". ui-btn.ui-input-btn.ui-corner-all.ui-shadow"). CSS (สไตล์);

$ ("#slider"). CSS ("พื้นหลังสี", "#e5ee9f");

$ ("#labletip") ข้อความ ("ขอบคุณ!");

} อื่น {

_self.isok = false; // ปลดล็อค

$ ("#captcha"). val (0);

var style = {"ตัวกรอง": "alpha (opacity = 0.2)"

"-moz-opacity": "0.2", "ความทึบ": "0.2"}

$ (". ui-btn.ui-input-btn.ui-corner-all.ui-shadow"). CSS (สไตล์);

$ ("#slider"). CSS ("พื้นหลังสี", "#fdeb9c");

$ ("#labletip") ข้อความ ("เลื่อนเพื่อยืนยันว่าฉันเป็นมนุษย์!");

-

-

</script>

มีการรับรู้ผลกระทบ: