文章参考自：链接

1. 下载插件：链接

需要jq币，鉴于经常逛jQuery插件库，花了30大洋买了100jq币，发现开发还是挺费钱的，，，哈哈

2. 引入CSS到css文件夹： slide-unlock.css

3. 引入JS到js文件夹： jquery.slideunlock.js(当然jQuery库少不了的)

4. html页面引入路径(本人使用thymeleaf模板引擎)：

1)css:
<!-- slide-unlock css -->
<link th:rel="stylesheet" th:href="@{/css/slide-unlock.css}"></link>
2)js:
<!-- slide-unlock js -->
<script th:src="@{/js/jquery.slideunlock.js}"></script>

5. 引入样式

<div id="slider">
        <div id="slider_bg"></div>
        <span id="label">>></span> <span id="labelTip">拖动滑块验证</span>
</div>

6. js脚本

<script>
    $(function () {
        var slider = new SliderUnlock("#slider",{
                successLabelTip : "验证成功" 
            },function(){
                alert("验证成功,即将跳转至百度");
                window.location.href="http://www.baidu.com"
            });
        slider.init();
    })
</script>

搞定

注意：

此插件直接使用可能不是很适合具体业务需求，可以根据自身需要修改slide-unlock.css样式文件，比如说将#slider中的margin: 100px auto;改成margin: 10px auto;这样margin值减小为10px，可能更适合