代码高亮

代码高亮代码高亮代码高亮代码高亮,下面是安装了Z-BLOG免费插件 代码高亮+复制&

隔壁老李

代码高亮代码高亮代码高亮代码高亮,下面是安装了Z-BLOG免费插件 代码高亮+复制 的效果。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>滑动解锁</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
#slide_box {
    width: 100%;
    height: 42px;
    text-align: center;
    line-height: 42px;
    font-size: 14px;
    color: #717171;
    background-color: #e8e8e8;
    border: none;
    margin-bottom: 20px;
}
#slide_xbox {
    width: 50px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    font-size: 16px;
    color: #fff;
    position: absolute;
    background: #35b34a;
}
#slide_btn {
    cursor: pointer;
    width: 50px;
    height: 42px;
    background-color: #fff;
    float: right;
    -webkit-box-shadow: 0px 0px 15px 0px #ddd;
    -moz-box-shadow: 0px 0px 15px 0px #ddd;
    box-shadow: 0px 0px 15px 0px #ddd;
    color: #8a8c97;
}
#slide_btn > .iconfont {
    font-size: 20px;
}
.prohibit {
    cursor: no-drop !important;
    background: #b2afaf !important;
}
</style>
</head>
<body>
<div id="slide_box">
  <div id="slide_xbox">
    <div id="slide_btn"> <span>>></span> <img src="" alt=""> </div>
  </div>
  请按住滑块,拖动到最右边 </div>
<input id="resetBtn" type="submit" name="sub" style="display: inline-block;border:0;width: 105px;height: 38px;line-height: 38px;text-align: center;background: #409EFF;border-radius: 3px;color: #FFF;cursor: pointer;" value="提交" >
<script type="text/javascript">
    var locked;
    window.onload = function () {
        slide();
        
    }
    window.onresize = function () {
        if(locked==true){
            var boxWidth = $('#slide_box').width();
            $('#slide_xbox').width(boxWidth);
        }else{
            slide();
        }
    }

    //滑动解锁移动
    function slide() {
        var slideBox = $('#slide_box')[0];
        var slideXbox = $('#slide_xbox')[0];
        var btn = $('#slide_btn')[0];
        var slideBoxWidth = slideBox.offsetWidth;
        var btnWidth = btn.offsetWidth;
        //pc端
        btn.ondragstart = function () {
            return false;
        };
        btn.onselectstart = function () {
            return false;
        };
        btn.onmousedown = function (e) {
            var disX = e.clientX - btn.offsetLeft;
            document.onmousemove = function (e) {
                var objX = e.clientX - disX + btnWidth;
                if (objX < btnWidth) {
                    objX = btnWidth
                }
                if (objX > slideBoxWidth) {
                    objX = slideBoxWidth
                }
                $('#slide_xbox').width(objX + 'px');
            };
            document.onmouseup = function (e) {
                var objX = e.clientX - disX + btnWidth;
                if (objX < slideBoxWidth) {
                    objX = btnWidth;
                } else {
                    objX = slideBoxWidth;
                    locked = true;
                    $('#slide_xbox').html('验证通过<div id="slide_btn"><span style="color: #35b34a;">√</span></div>');
					$('#resetBtn').removeClass('prohibit');
					$('#resetBtn').attr('disabled', false);
                }
                $('#slide_xbox').width(objX + 'px');
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
        //移动端
        var cont = $("#slide_btn");
        var startX = 0, sX = 0, moveX = 0,leftX = 0;
        cont.on({//绑定事件
            touchstart: function (e) {
                startX = e.originalEvent.targetTouches[0].pageX;//获取点击点的X坐标
                sX = $(this).offset().left;//相对于当前窗口X轴的偏移量
                leftX = startX - sX;//鼠标所能移动的最左端是当前鼠标距div左边距的位置
            },
            touchmove: function (e) {
                e.preventDefault();
                moveX = e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
                var objX = moveX - leftX + btnWidth;
                if (objX < btnWidth) {
                    objX = btnWidth
                }
                if (objX > slideBoxWidth) {
                    objX = slideBoxWidth
                }
                $('#slide_xbox').width(objX + 'px');
            },
            touchend: function (e) {
                var objX = moveX - leftX + btnWidth;
                if (objX < slideBoxWidth) {
                    objX = btnWidth;
                } else {
                    objX = slideBoxWidth;
                    locked = true;
                    $('#slide_xbox').html('验证通过<div id="slide_btn"><i class="iconfont icon-xuanzhong" style="color: #35b34a;"></i></div>');
					$('#resetBtn').removeClass('prohibit');
					$('#resetBtn').attr('disabled', false);
                }
                $('#slide_xbox').width(objX + 'px');
            }
        });
    }

	$('#resetBtn').addClass('prohibit');
	$('#resetBtn').attr('disabled', true);
</script>
</body>
</html>


上一篇:探一方秘境,坠入一片深蓝 下一篇:文章演示页 副标题 自定义封面(Jz52_Future主题)

发表评论

返回顶部