js实现图片自旋转

最新推荐文章于 2024-05-17 13:52:13 发布

男神你姚哥

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量4.1k

点赞数 7

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_42775531/article/details/104296879

版权

1.代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		img{
			width: 400px;
			height: 400px;
			background-size: cover;
			border-radius: 50%;
			box-shadow: 10px 10px 10px rgba(0,0,0,.5);
			cursor: pointer;
		}
	</style>
	<body>
		<img id="img"  src="http://n.sinaimg.cn/sinacn/20170822/6fd8-fykcypq3405231.jpg"/ >
	</body>
	<script type="text/javascript">
		var rotateval=0// 旋转角度
			var Interval //定时器
		window.onload=function(){
			rotate()
			
			document.getElementById('img').onmousemove=function(){
				clearInterval(Interval)
			}
			document.getElementById('img').onmouseleave=function(){
				rotate()
			}
			
			//核心代码定时器
			function rotate(){
				Interval=setInterval(function(){
					var img=document.getElementById('img');
					rotateval+=1;
					img.style.transform='rotate('+rotateval+'deg)'
					img.style.transition = '0.1s linear'
				},100)
			}
			
		}
	</script>
</html>

男神你姚哥

关注

7
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
js实现图片自旋转

1.代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> img{ width: 400px; height: 40...
复制链接

扫一扫