文章参考自：链接
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，可能更适合
