実現効果: CSSスタイルコードは省略しています。 HTML コード: jquery.mobile と jquery がページにインポートされます コードをコピーします コードは次のとおりです: </script">http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script</a>><br> <script src="<a href="http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script">http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script</a>><br> </div> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="52904" class="copybut" id="copybut52904" onclick="doCopy('code52904')"><u>コードをコピーします</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code52904"> <br> <div id="pageSlide"><br> <input type="hidden" value="" id="captcha"/><br> <br> <div id="slider" class="slider"><br> ＆lt; span id = "label" class = "label"＆gt;＆lt;/span＆gt;<br> <span id="lableTip">スライドして私が人間であることを確認してください!</span><br> <br><br> </div> js コード: <p></p> <p></p> <div class="codetitle"><span>コードをコピー<a style="CURSOR: pointer" data="30878" class="copybut" id="copybut30878" onclick="doCopy('code30878')"><u></u> コードは次のとおりです:</a><div class="codebody" id="code30878"> <br> <スクリプトタイプ="text/javascript"><br> window.onload = function () {<br> var slider1 = new Slider();<br> slider1.Init();<br> ///画面サイズが変更されたときにトリガーされます<br> $(window).resize(function () {<br> slider1.HanderIn();<br> slider1.HanderOut();<br> });<br> }<br> //スライダーバーオブジェクト<br> 関数 Slider(swipestart、min、max、index、IsOk、lableIndex) {<br> var _self = this;<br> //スライドを開始するかどうか<br> _self.swipestart = swipestart;<br> //最小値<br> _self.min = min;<br> //最大値<br> _self.max = max;<br> //スライダーの現在位置<br> _self.index = インデックス;<br> //スライドが成功したかどうか<br> _self.IsOk = IsOk;<br> //マウスはスライドボタンの位置にあります<br> _self.lableIndex = lableIndex;<br> }<br> //初期化<br> Slider.prototype.Init = function () {<br> var _self = this;<br> $("#label").on("mousedown", function (event) {<br> var e = イベント || window.event;<br> _self.lableIndex = e.clientX - this.offsetLeft;<br> _self.HanderIn();<br> });<br> $("#pageSlide").on("mousemove", function (event) {<br> _self.HanderMove(event);<br> });<br> $(document).on("mouseup", function (event) {<br> _self.HanderOut();<br> });<br> $("#label").on("touchstart", function (event) {<br> var e = イベント || window.event;<br> _self.lableIndex = e.originalEvent.pageX - this.offsetLeft;<br> _self.HanderIn();<br> });<br> $("#pageSlide").on("touchmove", function (event) {<br> _self.HanderMove(event, "mobile");<br> });<br> $(document).on("touchend", function (event) {<br>_self.HanderOut();<br> });<br> }<br> //マウス/指がスライド ボタンに触れます<br> Slider.prototype.HanderIn = function () {<br> var _self = this;<br> _self.swipestart = true;<br> _self.min = 0;<br> _self.max = $("#slider").width();<br> }<br> //マウス/指を外に出す<br> Slider.prototype.HanderOut = function () {<br> var _self = this;<br> //停止<br> _self.swipestart = false;<br> _self.Move();<br> }<br> //マウス/指の動き<br> Slider.prototype.HanderMove = 関数 (イベント、タイプ) {<br> var _self = this;<br> if (_self.swipestart) {<br> event.preventDefault();<br> var イベント = イベント || <br> If (type == "モバイル") {<br> _self.index =event.originalEvent.pageX - _self.lableIndex;<br> } else {<br> _self.index = events.clientX - _self.lableIndex;<br> }<br> _self.Move();<br> }<br> }<br> //マウス/指を外に出す<br> Slider.prototype.Move = function () {<br> var _self = this;<br> $(".warn").text("index:" _self.index ", max" _self.max ",lableIndex:" _self.lableIndex ",value:" $("#captcha").val() " date :" new Date().getUTCDate());<br> If ((_self.index 20) >= _self.max) {<br> _self.index = _self.max - 20;<br> }<br> if (_self.index _self.index = _self.min;<br> }<br> $(".label").css("left", _self.index "px");<br> If (_self.index == (_self.max - 20)) {<br> //停止<br> _self.swipestart = false;<br> _self.IsOk = true;//ロック解除<br> $("#captcha").val(1);<br> var style = {"filter": "alpha(opacity=1)",<br> "-moz-opacity": "1", "opacity": "1"}<br> $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style);<br> $("#slider").css("背景色", "#E5EE9F");<br> $("#lableTip").text("ありがとう!");<br> } else {<br> _self.IsOk = false;//未解锁<br> $("#captcha").val(0);<br> var style = { "フィルター": "alpha(opacity=0.2)",<br> "-moz-opacity": "0.2", "opacity": "0.2"}<br> $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style);<br> $("#slider").css("背景色", "#FDEB9C");<br> $("#lableTip").text("スライドして人間であることを確認してください!");<br> }<br> }<br> 效果实现：
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
