jQuery仿百度登录滑块验证图片特效代码下载


jQuery仿百度登录滑块验证图片特效代码下载
jQuery仿百度登录滑块验证图片特效代码下载以及仿百度、登录滑块、验证图片等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/yz.js" type="text/javascript" charset="utf-8"></script>

2. HTML代码

	<button class="btn">点击查看效果</button>
	<div class="box">
		<img src="image/cw.png" class="cuo">
		<span class="top-s">身份验证</span>
		<span class="top-x">拖动滑块,使图片角度为正</span>
		<div id="rotateWrap1">
		<div class="rotateverify-contaniner">
				<div class="rotate-can-wrap">
					<canvas class="rotateCan rotate-can" width="200" height="200"></canvas>
					<div class="statusBg status-bg"></div>
				</div>
				<div class="control-wrap slideDragWrap">
					<div class="control-tips">
						<p class="c-tips-txt cTipsTxt">滑动将图片转正</p>
					</div>
					<div class="control-bor-wrap controlBorWrap"></div>
					<div class="control-btn slideDragBtn">
						<i class="control-btn-ico"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		// 加一个div全部 然后设置display:block;
		$(function () {
			// 点击按钮
			$(".btn").click(function () {
				console.log('123123');
				$(".box").css("display", "block");
				$("body").css({ "background": "#807878" });
				$(".btn").attr("disabled", true);
			})
			//    点击x
			$(".cuo").click(function () {
				$(".box").css("display", "none");
				$("body").css("background", "#fff");
				$(".btn").attr("disabled", false);
			})
			//1
			var myRotateVerify = new RotateVerify('#rotateWrap1', {
				initText: '滑动将图片转正',//默认
				slideImage: ['image/1.png', 'image/2.png', 'image/4.png', 'image/5.png'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
				slideAreaNum: 10,// 误差范围角度 +- 10(默认)
				getSuccessState: function (res) {//验证通过 返回  true;
					// console.log('例1' + res);
				}
			})
		})
	</script>

相关推荐

发表评论

相关文章