js实现图片自旋转

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>

你可能感兴趣的:(js实现图片自旋转)