JavaScriptでスライドロック解除機能を実装_基礎知識

実現効果:

CSSスタイルコードは省略しています。

HTML コード:

jquery.mobile と jquery

がページにインポートされます

コードをコピーします コードは次のとおりです: http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"> > http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"> >

コードをコピーします コードは次のとおりです:

＆lt; span id = "label" class = "label"＆gt;＆lt;/span＆gt; スライドして私が人間であることを確認してください!

js コード:

コードをコピー コードは次のとおりです: window.onload = function () { var slider1 = new Slider(); slider1.Init(); ///画面サイズが変更されたときにトリガーされます $(window).resize(function () { slider1.HanderIn(); slider1.HanderOut(); }); } //スライダーバーオブジェクト 関数 Slider(swipestart、min、max、index、IsOk、lableIndex) { var _self = this; //スライドを開始するかどうか _self.swipestart = swipestart; //最小値 _self.min = min; //最大値 _self.max = max; //スライダーの現在位置 _self.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(event); }); $(document).on("mouseup", function (event) { _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(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 = 関数 (イベント、タイプ) { var _self = this; if (_self.swipestart) { event.preventDefault(); var イベント = イベント || If (type == "モバイル") { _self.index =event.originalEvent.pageX - _self.lableIndex; } else { _self.index = events.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 _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 = {"filter": "alpha(opacity=1)", "-moz-opacity": "1", "opacity": "1"} $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style); $("#slider").css("背景色", "#E5EE9F"); $("#lableTip").text("ありがとう!"); } else { _self.IsOk = false;//未解锁 $("#captcha").val(0); var style = { "フィルター": "alpha(opacity=0.2)", "-moz-opacity": "0.2", "opacity": "0.2"} $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style); $("#slider").css("背景色", "#FDEB9C"); $("#lableTip").text("スライドして人間であることを確認してください!"); } } 效果实现：

JavaScriptでスライドロック解除機能を実装_基礎知識

関連記事