知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    滑動解鎖插件slideunlock.js不依賴jquery

    作者:佳明媽 來源:web前端開發 2016-10-03 人氣:
    滑動解鎖插件slideunlock.js不依賴jquery等第三方庫,當然,作者也提供了jquery.slideunlock.js依賴jquery的插件,這個滑動解鎖插件適合移動端開發使用,無依賴版的插件js代碼均使用的是es5最新
    滑動解鎖插件slideunlock.js不依賴jquery等第三方庫,當然,作者也提供了jquery.slideunlock.js依賴jquery的插件,你可以選擇使用,懶人建站偏向使用不依賴版,
    這個滑動解鎖插件適合移動端開發使用,無依賴版的插件js代碼均使用的是es5最新語法,IE10以下均不能使用。
    我們來看下slideunlock.js節點選擇使用了querySelectorAll這在IE10以下版本是不支持的
    function $(selector, context) {
        return (context || document).querySelectorAll(selector);
    }
    

    示例代碼:

    slideunlock的html結構

    <div class="slideunlock-wrapper">
        <input type="hidden" value="" class="slideunlock-lockable"/>
        <div class="slideunlock-slider">
            <span class="slideunlock-label"></span>
            <span class="slideunlock-lable-tip">Slide to unlock!</span>
        </div>
    </div>
    

    js引用

    <script type="text/javascript" src="js/slideunlock.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var slider = new SliderUnlock(".slideunlock-slider", {}, function(){
                alert('success');
            }, function(){
                document.querySelector(".warn").innerText = "index:" + slider.index + ", max:" + slider.max + ",lableIndex:" + slider.lableIndex + ",value:" + document.querySelector(".slideunlock-lockable").value + " date:" + new Date().getUTCDate();
            });
            slider.init();
    
            document.querySelector("#reset-btn").addEventListener('click', function(){
                slider.reset();
            });
        }
    </script>

    slideunlock css樣式代碼

    .slideunlock-wrapper{
        width: 360px;
        position: relative;
        padding: 50px;
        background: #ECF0F1;
        margin: 0 auto;
    }
    .slideunlock-slider{
        padding:20px;
        position: relative;
        border-radius: 2px;
        background-color: #FDEB9C;
        overflow: hidden;
        text-align: center;
    }
    .slideunlock-slider.success{
        background-color: #E5EE9F;
    }
    .slideunlock-label{
        width: 40px;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        background: #E67E22;
        z-index: 999;
        border-radius: 2px;
        cursor: pointer;
    }
    .slideunlock-label-tip{
        z-index: 9;
    }
    @media screen and (max-width: 640px) {
        .slideunlock-wrapper{
            width: 64%;
        }
    }

    jquery.slideunlock.js的引用示例:

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.slideunlock.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var slider = new SliderUnlock(".slideunlock-slider", {
                labelTip: "滑動解鎖",
                successLabelTip: "解鎖成功",
                duration: 200   // 動畫效果執行時間,默認200ms
            }, function(){
                alert('success');
            }, function(){
                $(".warn").text("index:" + slider.index + ", max:" + slider.max + ",lableIndex:" + slider.lableIndex + ",value:" + $(".slideunlock-lockable").val() + " date:" + new Date().getUTCDate());
            });
            slider.init();
    
            $("#reset-btn").on('click', function(){
                slider.reset();
            });
        })
    </script>

    slideunlock.js參數列表

    labelTip://滑塊上的提示文字
    successLabelTip://滑塊成功后的提示文字
    duration://動畫持續時間
    swipestart://是否開始滑動
    min://最小值
    max://最大值
    index://當前滑動條所處的位置
    IsOk://是否滑動成功
    lableIndex://鼠標在滑動按鈕的位置
    ↓ 查看全文

    滑動解鎖插件slideunlock.js不依賴jquery由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    滑動解鎖插件slideunlock.js不依賴jquery-最新評論

    梦幻接高级宝石赚钱吗 好运彩字谜 大乐透是个骗局吗 新手理财项目 吉林11开奖结果 北京十一选五走势图手机 什么是融资融券的股 11选五5开奖结果 广西体彩十一选五开奖走势图 贵州快3走跨度走势图 上海十一选五基本走势图表