jQuery滑动图片角度插件（仿百度登录），canvas简易实现

最新推荐文章于 2021-06-26 12:36:53 发布

前端小狮

最新推荐文章于 2021-06-26 12:36:53 发布

阅读量800

点赞数

分类专栏： jq 文章标签： jq验证 jq图片转动角度验证图片转动验证

本文链接：https://blog.csdn.net/m0_37885651/article/details/102861795

版权

jq 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jqRotateVerify

jq库地址 https://www.jq22.com/jquery-info22444
git地址 https://github.com/chen9091/jqRotateVerify

使用

				var myRotateVerify = new RotateVerify('#rotateWrap',{
					initText:'滑动将图片转正',//默认
					slideImage:['image/1.jpg','image/2.jpg','image/4.jpg'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
					slideAreaNum:10,// 误差范围角度 +- 10(默认)
				    getSuccessState:function (res) {//验证通过 返回  true;
				        console.log('例1' + res);
				    }
				})

参数

initText ：‘滑动将图片转正’,//默认
slideImage ：图片的src,可以为一个图片的src,也可以是多张图片的 src 数组
slideAreaNum：10,// 误差范围角度 ± 10(默认)
getSuccessState：验证成功回调返回true

重置方法

	resetSlide()
	//myRotateVerify.resetSlide()

获取验证状态

verifyState  
//myRotateVerify.verifyState

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jqRotateVerify.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="rotateWrap" style="margin-top:50px;">
			
		</div>
		<div style="text-align: center;margin-top: 50px;">
			<button type="button" id="resetBtn" style="height: 30px;">重置</button>
			<button type="button" id="testBtn" style="height: 30px;">状态测试</button>
		</div>
		<div id="rotateWrap2" style="margin-top:50px;">
			
		</div>
		<script type="text/javascript">
			$(function(){
				//1
				var myRotateVerify = new RotateVerify('#rotateWrap',{
					initText:'滑动将图片转正',//默认
					slideImage:['image/1.jpg','image/2.jpg','image/4.jpg'],//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
					slideAreaNum:10,// 误差范围角度 +- 10(默认)
				    getSuccessState:function (res) {//验证通过 返回  true;
				        console.log('例1' + res);
				    }
				})
				//重置 
				$("#resetBtn").on('click',function(){
					myRotateVerify.resetSlide();
				})
				//可拿到 验证状态 
				$("#testBtn").on('click',function(){
					alert(myRotateVerify.verifyState);
				})
				
				//2
				var myRotateVerify2 = new RotateVerify('#rotateWrap2',{
					initText:'滑动将图片转正',//默认
					slideImage:'image/4.jpg',//arr  [imgsrc1,imgsrc2] 或者str 'imgsrc1'
					slideAreaNum:10,// 误差范围角度 +- 10(默认)
				    getSuccessState:function (res) {//验证通过 返回  true;
				        console.log('例2' + res);
				    }
				})
			})
		</script>
	</body>
</html>