<meter id="7ntxv"></meter>

<b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
<nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

    <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
    <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

    <mark id="7ntxv"></mark>
    <meter id="7ntxv"><var id="7ntxv"></var></meter>

    知識 分享 互助 懶人建站

      懶人建站專注于網頁素材下載,提供網站模板、網頁設計、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-最新評論

      亚洲免费的黄色网站_黄色网站在线放久操射视频_A片www.黄色网站成年人_天天干 天天操天天干

      <meter id="7ntxv"></meter>

      <b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
      <nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

        <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
        <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

        <mark id="7ntxv"></mark>
        <meter id="7ntxv"><var id="7ntxv"></var></meter>