欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)滑動(dòng)解鎖功能

 更新時(shí)間:2014年12月31日 09:46:33   投稿:hebedich  
這篇文章主要介紹了javascript實(shí)現(xiàn)滑動(dòng)解鎖功能的方法及示例,效果非常棒,需要的朋友可以參考下

實(shí)現(xiàn)效果:

css樣式代碼略。

html代碼:

頁(yè)面上導(dǎo)入了jquery.mobile 、jquery

復(fù)制代碼 代碼如下:

<script src=">
<script src="
>

復(fù)制代碼 代碼如下:

<div id="pageSlide">
                        <input type="hidden" value="" id="captcha"/>
 
                        <div id="slider" class="slider">
                            <span id="label" class="label"></span>
                            <span id="lableTip">Slide to confirm I am human!</span>
                        </div>
                    </div>

 js代碼:

復(fù)制代碼 代碼如下:

<script type="text/javascript">
        window.onload = function () {
            var slider1 = new Slider();
            slider1.Init();
            ///屏幕大小發(fā)生改變時(shí)觸發(fā)
            $(window).resize(function () {
                slider1.HanderIn();
                slider1.HanderOut();
            });
        }
        //滑動(dòng)條對(duì)象
        function Slider(swipestart, min, max, index, IsOk, lableIndex) {
            var _self = this;
            //是否開始滑動(dòng)
            _self.swipestart = swipestart;
            //最小值
            _self.min = min;
            //最大值
            _self.max = max;
            //當(dāng)前滑動(dòng)條所處的位置
            _self.index = index;
            //是否滑動(dòng)成功
            _self.IsOk = IsOk;
            //鼠標(biāo)在滑動(dòng)按鈕的位置
            _self.lableIndex = lableIndex;
        }
        //初始化
        Slider.prototype.Init = function () {
            var _self = this;
            $("#label").on("mousedown", function (event) {
                var e = event || 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 = event || 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();
            });
        }
        //鼠標(biāo)/手指接觸滑動(dòng)按鈕
        Slider.prototype.HanderIn = function () {
            var _self = this;
            _self.swipestart = true;
            _self.min = 0;
            _self.max = $("#slider").width();
        }
        //鼠標(biāo)/手指移出
        Slider.prototype.HanderOut = function () {
            var _self = this;
            //停止
            _self.swipestart = false;
            _self.Move();
        }
        //鼠標(biāo)/手指移動(dòng)
        Slider.prototype.HanderMove = function (event, type) {
            var _self = this;
            if (_self.swipestart) {
                event.preventDefault();
                var event = event || window.event;
                if (type == "mobile") {
                    _self.index = event.originalEvent.pageX - _self.lableIndex;
                } else {
                    _self.index = event.clientX - _self.lableIndex;
                }
                _self.Move();
            }
        }
        //鼠標(biāo)/手指移出
        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 < 0) {
                _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("background-color", "#E5EE9F");
                $("#lableTip").text("Thank You!");
            } else {
                _self.IsOk = false;//未解鎖
                $("#captcha").val(0);
                var style = { "filter": "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("background-color", "#FDEB9C");
                $("#lableTip").text("Slide to confirm I am human!");
            }
        }
    </script>

效果實(shí)現(xiàn):

相關(guān)文章

最新評(píng)論