효과를 실현하십시오 :
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"). 텍스트 ( "인간인지 확인하기 위해 슬라이드!");
}
}
</스크립트>
효과가 실현됩니다.