効果を実現します：
CSSスタイルコードはありません。
HTMLコード：
jquery.mobileとjqueryはページにインポートされています
コードコピーは次のとおりです。
<スクリプトsrc = "http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"> </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 = "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 = this;
//切り替えかどうか
_self.swipestart = 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 = event || window.event;
_self.lableIndex = e.clientx -this.offsetLeft;
_self.handerin（）;
}）;
$（ "＃pageslide"）。
_self.handermove（event）;
}）;
$（document）.on（ "mouseup"、function（event）{
_self.handerout（）;
}）;
$（ "＃label"）。on（ "touchstart"、function（event）{
var e = event || window.event;
_self.lableIndex = e.originalevent.pagex -this.offsetLeft;
_self.handerin（）;
}）;
$（ "＃pageslide"）。
_self.handermove（event、 "Mobile"）;
}）;
$（document）.on（ "touchend"、function（event）{
_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;
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 = this;
$（ "。warn"）。text（ "index：" + _ self.index + "、max" + _ self.max + "、lableindex：" + _ self.lableindex + "、value：" + $（ "＃captcha"）。val（） + "date：" + new date（）。
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 = {"フィルター"： "alpha（ofacity = 1）"、
"-moz-opacity"： "1"、 "Opacity"： "1"}
$（ "。ui-btn.ui-input-btn.ui-corner-all.ui-shadow"）。css（style）;
$（ "＃slider"）。css（ "background-color"、 "＃e5ee9f"）;
$（ "＃labletip"）。テキスト（ "ありがとう！"）;
} それ以外 {
_self.isok = false; //ロック解除
$（ "＃captcha"）。val（0）;
var style = {"フィルター"： "alpha（ofacity = 0.2）"、
"-moz-opacity"： "0.2"、 "Opacity"： "0.2"}
$（ "。ui-btn.ui-input-btn.ui-corner-all.ui-shadow"）。css（style）;
$（ "＃slider"）。css（ "background-color"、 "＃fdeb9c"）;
$（ "＃labletip"）。テキスト（「私が人間であることを確認するためのスライド！ "）;
}
}
</script>
効果が実現します：