菜单

javascript完成滑动解锁成效

2019年8月31日 - JavaScript

javascript贯彻滑动解锁效率,javascript滑动解锁

福寿康宁效果与利益:

图片 1

css样式代码略。

html代码:

页面上导入了jquery.mobile 、jquery

复制代码 代码如下:

<script
src=”http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
<script
src=”http://apps.bdimg.com/libs/jquerymobile/1.4.2/jquery.mobile.min.js"&gt;&lt;/script&gt;

复制代码 代码如下:

<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代码:

复制代码 代码如下:

<script type=”text/javascript”>
        window.onload = function () {
            var slider1 = new Slider();
            slider1.Init();
            ///荧屏大小发生退换时接触
            $(window).resize(function () {
                slider1.HanderIn();
                slider1.HanderOut();
            });
        }
        //滑动条对象
        function Slider(swipestart, min, max, index, IsOk, lableIndex)
{
            var _self = this;
            //是还是不是上马滑动
            _self.swipestart = swipestart;
            //最小值
            _self.min = min;
            //最大值
            _self.max = max;
            //当前滑动条所处的岗位
            _self.index = index;
            //是还是不是滑动成功
            _self.IsOk = IsOk;
            //鼠标在滑行按键的职责
            _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();
            });
        }
        //鼠标/手指接触滑动按钮
        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 = 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();
            }
        }
        //鼠标/手指移出
        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>

职能落到实处:

图片 2

http://www.bkjia.com/Javascript/936050.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/936050.htmlTechArticlejavascript实现滑动解锁功能,javascript滑动解锁
落成效果与利益: css样式代码略。 html代码: 页面上导入了jquery.mobile 、jquery
复制代码 代码如下:…

效果图:

图片 3

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 #slider-box {
 width: 300px;
 height: 50px;
 border-radius: 4px;
 background: #ccc;
 margin: 250px auto;
 position: relative;
 }
 #slider {
 width: 48px;
 height: 48px;
 border: 1px solid #eee;
 text-align: center;
 line-height: 48px;
 display: inline-block;
 background: #fff;
 border-radius: 4px;
 cursor: move;
 position: absolute;
 left: 0;
 z-index: 5;
 }
 #slider-text {
 text-align: center;
 line-height: 50px;
 display: inline-block;
 width: 100%;
 height: 50px;
 font-family: "微软雅黑";
 position: absolute;
 left: 0;
 z-index: 4;
 }
 #slider-bg {
 width: 0;
 height: 48px;
 background: green;
 position: absolute;
 z-index: 3;
 border-radius: 4px;
 }
 #slider-Emerge {
 width: 100px;
 background:;
 height: 50px;
 position: absolute;
 }
 #stop-go {
 width: 48px;
 height: 48px;
 border: 1px solid #eee;
 background:#36F;
 position: absolute;
 right: -1px;
 display: none;
 text-align: center;
 line-height: 48px;
 color: #fff;
 font-family: "微软雅黑";
 border-radius: 4px;
 z-index: 5;
 }
 div{
 -moz-user-select:none;
 -webkit-user-select:none;
 user-select:none; 
 }
 </style>
</head>
<body>
 <div id="slider-box">
 >
 滑动解锁


 ∨
 </div>
</body>
 <script type="text/javascript">
 var sliderel={
  $: function(selector){
  return document.getElementById(selector)
  },
 getEvent:function(e){

  var e=e || window.event
  return e;
 },
 stopBubble:function(e){
  var e =this.getEvent(e)
  if(typeof e.preventDefault != "undefined"){
  e.preventDefault();
  }else{
  e.returnValue = false;
  }
 }
 },
 Elemt={
 flag:false,
 nowMoseX: 0,
 mx:sliderel.$("slider-box"),
 sd:sliderel.$("slider"),
 st:sliderel.$("slider-text"),
 sb:sliderel.$("slider-bg"),
 se:sliderel.$("slider-Emerge"),
 sg:sliderel.$("stop-go"),
 }
 Elemt.sd.onmousedown=function(e){ 
  var e =sliderel.getEvent(e)
  sliderel.stopBubble(e);
  Elemt.flag=true
  nowMoseX=e.clientX-Elemt.sd.offsetLeft;
 }
 //滑块最大移动的距离
 maxMove=Elemt.mx.offsetWidth -Elemt.sd.offsetWidth;
 //鼠标移动的时候是否成功
 Elemt.mx.onmousemove=function(e){
  var e =sliderel.getEvent(e)
  if(Elemt.flag){
  var moveX=e.clientX-nowMoseX;
  var oElemLeft=Elemt.sd.offsetLeft;//判断滑块移动的范围  
  if(oElemLeft<0){ //判断滑块是否超出限制位置
  moveX=0;
  Elemt.flag=false
  }else if(oElemLeft>maxMove){
  moveX=maxMove;
  Elemt.sg.style.display="block";
  Elemt.sd.style.display="none"
  Elemt.sb.style.width=300+"px"
  Elemt.st.innerHTML="滑动成功"
  Elemt.st.style.color="#fff"
  }
  }
  Elemt.sd.style.left=moveX+"px" 
  Elemt.sb.style.width=oElemLeft+20+"px";
 }
 //当鼠抬起判断是否滑动成功
 Elemt.mx.onmouseup=function(e){
  var e =sliderel.getEvent(e)
  Elemt.flag=false
  if(Elemt.sd.offsetLeft<maxMove){
  speed=Math.ceil(Elemt.sd.offsetLeft/40);
  time=setInterval(function(){
  if(Elemt.sd.offsetLeft>=0){
   Elemt.sd.style.left=Elemt.sd.offsetLeft-speed+"px";
   Elemt.sb.style.width=Elemt.sb.offsetWidth-speed+"px";
  }else{
   clearInterval(time);
   return false;
  }
  },10)
  }
  }
 //当鼠离开是否滑动成功 
 Elemt.sd.onmouseout=function(e){
  sliderel.stopBubble(e);
  Elemt.flag=false;
  if( Elemt.sd.offsetLeft<maxMove){
  speed=Math.ceil(Elemt.sd.offsetLeft/40);
  time=setInterval(function(){
  if(Elemt.sd.offsetLeft>=0){
   Elemt.sd.style.left=Elemt.sd.offsetLeft-speed+"px";
   Elemt.sb.style.width=Elemt.sb.offsetWidth-speed+"px";
  }else{
   clearInterval(time);
   return false;
  }
  },10);
  }
 }
 </script>
</html>

上述就是本文的全部内容,希望本文的内容对我们的求学大概办事能推动一定的救助,同期也期望多多帮衬脚本之家!

您恐怕感兴趣的文章:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图