jQuery拖动滑块滑动验证插件

一款简单实用的jQuery拖动滑块滑动验证插件，可以通过传参的方式修改滑块的CSS样式，可以传入滑动成功后再执行的方法。一个页面可以生成多个滑动验证。

分类：表单代码 > 验证码难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script src="jquery.min.js"></script>
<script src="Sliding_Validation_Gu.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var sliding_validation = SlidingValidation.create($('body'),{},function(){}); 
	
	/**
	 *参数1 —— 在传入的元素的结尾插入-obj
	 */
	
	/**
	 *参数2 —— 修改滑动验证的样式-{"key":"value"}
	 * position: "relative", 滑动验证的定位
	   top: "0px", 滑动验证的top值
	   left: "0px", 滑动验证的left值
	   slide_block_wrapper_width: "300px", 滑动验证的宽度
	   slide_block_wrapper_height: "40px", 滑动验证的高度
	   slide_block_width: "50px", 滑动块的宽度
	   slide_block_height: "100%", 滑动块的高度
	   margin: "0px 0px 0px 0px", 滑动验证的marigin
	   slider_wrapper_zindex: 10000, 滑动验证的z-index
	   slider_wrapper_bg: "#e8e8e8", 滑动验证的背景颜色
	   slider_bg: "rgb(255,255,255)", 滑块的背景颜色
	   progress_bg: "rgb(255,184,0)", 滑动进度的背景颜色
	   default_text: "请向右滑动滑块", 滑动区域的文字
	   default_text_color: "black", 滑动文字的默认颜色
	   success_text_color: "white", 成功后滑动文字的颜色
	   default_text_font_size: "12px", 滑动文字的文字大小
	   success_show_text: "验证成功", 验证成功后滑动文字的内容
	   success_slider_wrapper_bg: "rgb(76,175,80)", 滑动成功后 滑动进度的背景颜色
	   success_url_icon: "sliding_block_image/ok.png", 滑动成功后滑块上面的图片 url地址
	   default_url_icon: "sliding_block_image/right-arrow.png",  默认滑块上面的url地址
	   box_shadow: "1px 1px 5px rgba(0,0,0,0.2)", 滑动验证的阴影
	   border: "1px solid #ccc" 滑块的border
	 */
	
	/**
	 *参数3 —— 滑动验证成功之后执行的方法-function(){}
	 */
</script>