图片旋转验证原来这么简单

1、搭建页面元素（图片+滚动条）

<body><div><img  src="https://c-ssl.duitang.com/uploads/item/201506/24/20150624231809_CQvds.thumb.1000_0.jpeg" /><div class="scroll" id="scroll"><div class="bar" id="bar"></div><div class="mask" id="mask"></div></div><span></span></div>
</body>

2、给它们加一点点样式

<style>*{margin: 0;padding: 0;}body{width: 100%;height: 100%;text-align: center;}.scroll{margin:100px auto;width: 500px;height: 5px;background: #ccc;position: relative;}.bar{width: 20px;height: 20px;background: #369;position: absolute;top: -7px;left: 0;cursor: pointer;border-radius: 50% 50%;}.mask{position: absolute;left: 0;top: 0;background: #369;width: 0;height: 5px;}span{font-size: large;display: none;}img{margin-top: 100px;width: 200px;height: 200px;overflow: hidden;object-fit: cover;border-radius: 50% 50%;/* transform: rotate(30deg); */}button{width: 80px;height: 40px;}
</style>

3、关键的js代码

<script>  var scroll = document.getElementById('scroll');var bar = document.getElementById('bar');var mask = document.getElementById('mask');var ptxt = document.getElementsByTagName('span')[0];var img = document.getElementsByTagName('img')[0];var barleft = 0;var angle = Math.random()*360;bar.onmousedown = function(event){var event = event || window.event;var leftVal = event.clientX - this.offsetLeft;var that = this;// 拖动一定写到 down 里面才可以document.onmousemove = function(event){var event = event || window.event;barleft = event.clientX - leftVal;     if(barleft < 0)barleft = 0;else if(barleft > scroll.offsetWidth - bar.offsetWidth)barleft = scroll.offsetWidth - bar.offsetWidth;mask.style.width = barleft +'px' ;that.style.left = barleft + "px";newangle = angle;newangle = parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 360) + newangle;newangle %= 360;img.style.transform = 'rotate('+newangle+'deg)';console.log(newangle);//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bugwindow.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();}document.onmouseup = function(){document.onmousemove = null; //弹起鼠标不做任何操作let nowangle = img.style.transform;console.log(nowangle);nowangle = nowangle.substr(7,6);//判定成功的角度误差，可以根据自己的需求来修改if(nowangle > 350 || nowangle < 10){alert("验证通过");}else{alert("验证失败!!!!!!!!!!!!!!!!");}window.location.reload();}}function check(){let nowangle = img.style.transform;console.log(nowangle);nowangle = nowangle.substr(7,6);if(nowangle > 350 || nowangle < 10){alert("验证通过");}else{alert("验证失败");}}//随机图片初始旋转角度while(angle < 20 || angle > 350){angle = Math.random()*360;}img.style.transform = 'rotate('+angle+'deg)';</script>

图片旋转验证原来这么简单相关推荐

爬虫-百度安全验证-图片旋转验证-深度学习解决方案
在通过百度关键词搜索进行爬虫的过程中,会遇到进入百度安全验证页面的情况.随着访问次数的的增加,进入安全验证页面的概率也随之增大,且这种情况并不能通过请求头加入 Accept 和引入随机 UA 来解决( ...
JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友
JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03 我来说两句收藏我要投稿引入下方的jquery.rotate.js文件,然后通过 ...
JQuery插件让图片旋转任意角度且代码极其简单
引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...
解决三星调用系统相机拍照显示图片旋转90度横着的问题
最近项目有个功能是调用系统相机拍照上传图片的功能,发现别的手机都没有ok,只有三星的显示图片很明显是旋转了90度,横着的.后来百度了解是三星对android相机单独做了优化(android碎片化,各种 ...
iOS 图片处理-图片旋转和裁剪
项目中要求处理图片, 简单记录一下图片旋转和裁剪过程 /** 将图片旋转弧度radians */ - (UIImage *)imageRotatedByRadians:(CGFloat)radians ...
flex 图片旋转（解决公转和自转问题）
在Flex中图片的旋转是既有公转和自转的.这样在图片旋转的时候就有一定小麻烦: 为了更好地说明问题,先引入两个概念:"自转"和"公转".想象一下,地球在绕着太阳 ...
css3 图片旋转360度动画
html <div class="n_animation_picture"><img class="n_picture_adm" src=&q ...
Vue实现图片滑动验证
Vue实现图片滑动验证使用vue完成使用vue完成实习一个星期小白对工作安排的图片滑动验证分享 1.安装依赖附上:https://www.npmjs.com/package/vue-monop ...
canvas实现图片旋转
canvas实现图片旋转前言代码前言在上一篇实现了 canvas实现压缩图片.现在有需求变了,需要将图片旋转,旋转后正确的显示图片的位置(不能被其他元素遮住),等比例显示图片. 简单的实现如下 ...

图片旋转验证原来这么简单

1、搭建页面元素（图片+滚动条）

2、给它们加一点点样式

3、关键的js代码

图片旋转验证原来这么简单相关推荐

最新文章

热门文章