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">

<입력 유형 = "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.wipestart = swipestart;

// 최소 값

_self.min = min;

// 최대 값

_self.max = max;

// 슬라이더의 현재 위치

_self.index = index;

// 슬라이드가 성공했는지 여부

_self.isok = isok;

// 마우스가 슬라이드 버튼 위치에 있습니다.

_self.lableIndex = lableIndex;

}

// 초기화

slider.prototype.init = function () {

var _self = this;

$ ( "#label"). on ( "Mousedown", function (event) {

var e = 이벤트 || Window.event;

_self.lableIndex = E.ClientX- this.OffSetLeft;

_self.handerin ();

});

$ ( "#pageslide"). on ( "mousemove", function (event) {

_self.handermove (이벤트);

});

$ (document) .on ( "마우스 업", 함수 (이벤트) {

_self.handerout ();

});

$ ( "#label"). on ( "TouchStart", function (event) {

var e = 이벤트 || Window.event;

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

_self.handerin ();

});

$ ( "#pageslide"). on ( "touchmove", function (event) {

_self.handerMove (이벤트, "모바일");

});

$ (document) .on ( "터치 엔드", 함수 (이벤트) {

_self.handerout ();

});

}

// 마우스/손가락은 슬라이딩 버튼을 터치합니다

Slider.prototype.handerin = function () {

var _self = this;

_self.wipestart = true;

_self.min = 0;

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

}

// 마우스/손가락 아웃

Slider.prototype.handerout = function () {

var _self = this;

//멈추다

_self.wipestart = false;

_self.move ();

}

// 마우스/손가락 이동

slider.prototype.handermove = function (이벤트, 유형) {

var _self = this;

if (_self.wipestart) {

event.preventDefault ();

var 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 = this;

$ ( ". warn"). text ( "index :" + _self.index + ", max" + _self.max + ", lableIndex :" + _self.lableIndex + ", value :" + $ ( "#captcha"). val () + "date :" + new date (). getUtcdate ());

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.wipestart = false;

_self.isok = true; // 잠금 해제

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

var style = { "필터": "알파 (불투명도 = 1)",

"-Moz-opacity": "1", "불투명도": "1"}}

$ ( ".

$ ( "#slider"). css ( "배경색", "#e5ee9f");

$ ( "#labletip"). 텍스트 ( "감사합니다!");

} 또 다른 {

_self.isok = false; // 잠금 해제

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

var style = { "필터": "알파 (불투명도 = 0.2)",

"-Moz-opacity": "0.2", "불투명도": "0.2"}

$ ( ".

$ ( "#slider"). css ( "배경색", "#fdeb9c");

$ ( "#labletip"). 텍스트 ( "인간인지 확인하기 위해 슬라이드!");

}

}

</스크립트>

효과가 실현됩니다.