ตระหนักถึงผลกระทบ:
รหัสสไตล์ 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>
มีการรับรู้ผลกระทบ: