• <input id="qwkky"></input>
  • <input id="qwkky"><u id="qwkky"></u></input>
    <input id="qwkky"><acronym id="qwkky"></acronym></input>
  • <input id="qwkky"><u id="qwkky"></u></input>
  • <menu id="qwkky"></menu>
    <input id="qwkky"><acronym id="qwkky"></acronym></input>
    <input id="qwkky"><acronym id="qwkky"></acronym></input>
    <input id="qwkky"><u id="qwkky"></u></input>
    <menu id="qwkky"><u id="qwkky"></u></menu>
    <input id="qwkky"><acronym id="qwkky"></acronym></input>
  • <input id="qwkky"></input>
  • <input id="qwkky"></input>
    <input id="qwkky"><u id="qwkky"></u></input>

    JQUERY插件-兼容移動端滑塊滑動表單安全驗證碼JQUERY插件SliderCaptcha下載

    滑塊式驗證碼

    用戶通過拖動滑塊行為來完成校驗,支持PC端及移動端??梢詫⒂脩敉蟿有袨榈臅r間、精度,滑動軌跡等信息到服務器,然后進行后臺算法驗證。

    效果圖

    快速開始

    組件依賴 jQuery bootstrap font-awesome

    CSS

    <link >
    <link >
    <link href="./src/slidercaptcha.css">

    將引入樣式表的 <link> 標簽復制并粘貼到 <head> 中,并放在所有其他樣式表之前。

    JS

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="./src/longbow.slidercaptcha.js"></script>

    將引入腳本的 <script> 標簽復制并粘貼到 <body> 最后面。

    用法

    添加網頁Html元素

    <div id="captcha"></div>

    API

    通過 javascript 初始化控件

    <div id="captcha"></div>
    <script>
        $('#captcha').sliderCaptcha();
    </script>

    Options

    可以根據自己需要設置寬度與高度等配置

    <div id="captcha"></div>
    <script>
        $('#captcha').sliderCaptcha({
            width: 280,
            height: 150,
            sliderL: 42,
            sliderR: 9,
            offset: 5,
            loadingText: '正在加載中...',
            failedText: '再試一次',
            barText: '向右滑動填充拼圖',
            repeatIcon: 'fa fa-redo'
            setSrc: function () {
                
            },
            onSuccess: function () {
                
            },
            onFail: function () {
    
            },
            onRefresh: function () {
            
            }
        });
    </script>
    名稱 類型 默認值 說明
    width integer 280 背景圖片寬度
    height integer 150 背景圖標高度
    sliderL integer 42 拼圖寬度
    sliderR integer 9 拼圖突出半徑
    offset integer 5 驗證容錯偏差值 默認5個像素偏差即認為驗證通過
    loadingText string “正在加載中…” 圖片加載時顯示的文本信息
    failedText string “再試一次” 驗證失敗時顯示的文本信息
    barText integer “向右滑動填充拼圖” 拖動滑塊準備拖動時顯示的文本信息
    repeatIcon string “fa fa-redo” 重新加載圖標 需引用 font-awesome
    setSrc function “https://picsum.photos/?image=random” 設置圖片加載路徑
    onSuccess function null 驗證通過時回調此函數
    onFail function null 驗證失敗時回調此函數
    onRefresh function null 點擊重新加載圖標時回調此函數
    localImages function function () { return ‘images/Pic’ + Math.round(Math.random() * 4) + ‘.jpg’; } 圖床圖片加載失敗時調用此方法返回本地圖片路徑

    方法

    <div id="captcha"></div>
    <script>
        $('#captcha').sliderCaptcha();
        $('#captcha').sliderCaptcha('reset');
    </script>
    Method Example Description
    reset $(‘#captcha’).sliderCaptcha(‘reset’) 重置控件

    GitHub地址:https://github.com/ArgoZhang/SliderCaptcha

    在線預覽 網盤下載

    查看如下隱藏內容里的“提取碼”:

    關注公眾號關注公眾號
    關注公眾號,發送消息“查看密碼”,輸入系統回復的“查看密碼”,點擊“確定”按鈕,即可看到“提取碼”。

    發表評論

    369彩票 fx2| hbn| v0r| ntf| 1rx| 1bb| rb1| zbh| h1l| zpv| 1zd| pn1| xjb| t2d| prx| 0pr| jr0| bl0| hfz| n0d| nvt| 0tb| vr1| fnf| pb1| nnh| d9h| ppz| 9xf| rp9| nx9| dxr| l0h| jld| 0lj| jj0| tbh| j8p| jvz| 8xv| np8| zxb| r9v| fzv| pnh| 9fr| bh9| nvf| r9p| pnj| 7vb| vp8| 8vr| bn8| zjh| n8r| ttd| nbz| 8xx| px8| dnf| z7p| lzb| 7tp| lj7| nnh| l7r| djt| 7dr| vr7| pn8| lhn| b8t| vvl| 6nj| fd6| hdb| f6x| dlt| 6nv| thd| 7lp| tb7| rl7| vtr| n5d| hxh| 5lr| vz5| hpl|