文章參考自：鏈接
1. 下載插件：鏈接
需要jq幣缺谴，鑒于經(jīng)常逛jQuery插件庫(kù)，花了30大洋買(mǎi)了100jq幣女责，發(fā)現(xiàn)開(kāi)發(fā)還是挺費(fèi)錢(qián)的漆枚，，抵知，哈哈
2. 引入CSS到css文件夾： slide-unlock.css
3. 引入JS到j(luò)s文件夾： jquery.slideunlock.js(當(dāng)然jQuery庫(kù)少不了的)
4. html頁(yè)面引入路徑(本人使用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">拖動(dòng)滑塊驗(yàn)證</span>
</div>
6. js腳本
<script>
$(function () {
var slider = new SliderUnlock("#slider",{
successLabelTip : "驗(yàn)證成功"
},function(){
alert("驗(yàn)證成功,即將跳轉(zhuǎn)至百度");
window.location.
});
slider.init();
})
</script>
搞定
注意：
此插件直接使用可能不是很適合具體業(yè)務(wù)需求墙基，可以根據(jù)自身需要修改slide-unlock.css樣式文件，比如說(shuō)將#slider中的margin: 100px auto;改成margin: 10px auto;這樣margin值減小為10px刷喜，可能更適合
