實現效果： css樣式代碼略。 html代碼： 頁面上導入了jquery.mobile 、jquery 複製程式碼 程式碼如下: http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js">> 複製程式碼 程式碼如下: 可 js程式碼： 複製程式碼 程式碼如下: <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 /> function 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 = 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 = event || 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 = event || 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 = function (event, type) {<br /> var _self = this;<br /> if (_self.swipestart) {<br /> event.preventDefault();<br /> var event = event || window.event;<br /> if (type == "mobile") {<br /> _self.index = event.originalEvent.pageX - _self.lableIndex;<br /> } else {<br /> _self.index = event.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 < 0) {<br /> _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 /> } 其他 {<br /> _self.IsOk = false;//未解鎖<br /> $("#captcha").val(0);<br /> var style = { "filter": "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 /> </腳本><br /> 效果實現：
