js实现滑动解锁功能（PC+Moblie）

Posted 2020-06-10

实现效果：

 

css样式代码略。

html代码：

页面上导入了jquery.mobile 、jquery

1 2	<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>

 

 

 js代码：

  1 /**
  2  * Created by Administrator on 15-1-9.
  3  */
  4 //滑动条对象
  5 function Slider(swipestart, min, max, index, IsOk, lableIndex) {
  6     var _self = this;
  7     //是否开始滑动
  8     _self.swipestart = swipestart;
  9     //最小值
 10     _self.min = min;
 11     //最大值
 12     _self.max = max;
 13     //当前滑动条所处的位置
 14     _self.index = index;
 15     //是否滑动成功
 16     _self.IsOk = IsOk;
 17     //鼠标在滑动按钮的位置
 18     _self.lableIndex = lableIndex;
 19 }
 20 
 21 //初始化
 22 Slider.prototype.Init = function () {
 23     document.getElementById("btnSubmit").disabled = true;
 24     var _self = this;
 25     $("#label").on("mousedown", function (event) {
 26         var e = event || window.event;
 27         _self.lableIndex = e.clientX - this.offsetLeft;
 28         _self.HanderIn();
 29     });
 30 
 31     $("#pageSlide").on("mousemove", function (event) {
 32         _self.HanderMove(event);
 33     });
 34 
 35     $(document).on("mouseup", function (event) {
 36         _self.HanderOut();
 37     });
 38 
 39 
 40     $("#label").on("touchstart", function (event) {
 41         try {
 42             var e = event || window.event;
 43             //event.originalEvent.changedTouches[0].clientX //event.originalEvent.pageX
 44             _self.lableIndex = event.originalEvent.changedTouches[0].clientX - this.offsetLeft;
 45             _self.HanderIn();
 46         } catch (e) {
 47             console.log(navigator.appVersion + "不支持TouchEvent事件！" + e.message);
 48         }
 49     });
 50 
 51     $("#pageSlide").on("touchmove", function (event) {
 52         try {
 53             _self.HanderMove(event, "mobile");
 54         } catch (e) {
 55             console.log(navigator.appVersion + "不支持touchmove事件！" + e.message);
 56         }
 57 
 58     });
 59 
 60     $(document).on("touchend", function (event) {
 61         try {
 62             _self.HanderOut();
 63         } catch (e) {
 64             console.log(navigator.appVersion + "不支持touchend事件！" + e.message);
 65         }
 66 
 67     });
 68 }
 69 
 70 //鼠标/手指接触滑动按钮
 71 Slider.prototype.HanderIn = function () {
 72     var _self = this;
 73     _self.swipestart = true;
 74     _self.min = 0;
 75     _self.max = $("#slider").width();
 76     if(_self.lableIndex<0){_self.lableIndex=0;}
 77 }
 78 
 79 //鼠标/手指移出
 80 Slider.prototype.HanderOut = function () {
 81     var _self = this;
 82     //停止
 83     _self.swipestart = false;
 84     _self.Move();
 85 }
 86 
 87 //鼠标/手指移动
 88 Slider.prototype.HanderMove = function (event, type) {
 89     var _self = this;
 90     if (_self.swipestart) {
 91         event.preventDefault();
 92         var event = event || window.event;
 93         if (type == "mobile") {
 94             //event.originalEvent.changedTouches[0].clientX //event.originalEvent.pageX
 95             _self.index = event.originalEvent.changedTouches[0].clientX - _self.lableIndex;
 96         } else {
 97             _self.index = event.clientX - _self.lableIndex;
 98         }
 99         _self.Move();
100     }
101 }
102 
103 //鼠标/手指移出
104 Slider.prototype.Move = function () {
105     var _self = this;
106     //$(".warn").text("index:" + _self.index + "， max" + _self.max + ",lableIndex:" + _self.lableIndex + ",value:" + $("#captcha").val() + " date:" + new Date().getUTCDate());
107     //$(".warn").text("max:"+ _self.max +",index:"+_self.index +",lableIndex:"+_self.lableIndex);
108     if ((_self.index + 20) >= _self.max) {
109         _self.index = _self.max - 20;
110     }
111 
112     if (_self.index < 0) {
113         _self.index = _self.min;
114     }
115     $(".label").css("left", _self.index + "px");
116     if (_self.index == (_self.max - 20)) {
117         //停止
118         _self.swipestart = false;
119         _self.IsOk = true;//解锁
120         $("#captcha").val(1);
121 
122         var style = {"filter": "alpha(opacity=1)",
123             "-moz-opacity": "1", "opacity": "1"}
124         $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style);
125 
126         $("#slider").css("background-color", "#E5EE9F");
127         $("#lableTip").text("Thank You!");
128         document.getElementById("btnSubmit").disabled = false;
129         document.getElementById("btnSubmit").parentNode.classList.remove("ui-state-disabled");
130     } else {
131         _self.IsOk = false;//未解锁
132         $("#captcha").val(0);
133         var style = { "filter": "alpha(opacity=0.2)",
134             "-moz-opacity": "0.2", "opacity": "0.2"}
135         $(".ui-btn.ui-input-btn.ui-corner-all.ui-shadow").css(style);
136         $("#slider").css("background-color", "#FDEB9C");
137         $("#lableTip").text("Slide to confirm I am human!");
138         document.getElementById("btnSubmit").disabled = true;
139 
140         document.getElementById("btnSubmit").parentNode.classList.add("ui-state-disabled");
141 
142     }
143 }

 

1	效果实现：<br><br>