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>