实现效果：
css样式代码略。
html代码：
页面上导入了jquery.mobile 、jquery
|
1
2
|
|
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> |
