jQuery拖动滑块滑动验证插件

来源:https://www.sucaihuo.com/js/5132.html 2020-03-20 10:46浏览(64) 收藏

一款简单实用的jQuery拖动滑块滑动验证插件,可以通过传参的方式修改滑块的CSS样式,可以传入滑动成功后再执行的方法。一个页面可以生成多个滑动验证。
jQuery拖动滑块滑动验证插件
分类:表单代码 > 验证码 难易:初级
查看演示 下载资源: 2 下载资源 下载积分: 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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3007547952

1 2