JS 仿 CD 唱机风格封面图片自动旋转

Javascript

创建事件执行记录

var rotateVal = 0 // 旋转角度
var InterVal // 定时器
window.onload = function () {
	// 网页加载完成后即运行 rotate 函数
	rotate()
	// 鼠标悬浮在图片上时，停止旋转，即清除定时器
	document.getElementById('logo').onmousemove = function () {
		clearInterval(InterVal)
	}
	// 鼠标离开图片时，继续旋转，即继续运行定时器
	document.getElementById('logo').onmouseleave = function () {
		rotate()
	}
}

// 设置定时器
function rotate () {
	InterVal = setInterval(function () {
		var img = document.getElementById('logo')
		rotateVal += 1
		// 设置旋转属性 (顺时针)
		img.style.transform = 'rotate(' + rotateVal + 'deg)'
		// 设置旋转属性 (逆时针)
		//img.style.transform = 'rotate(-' + rotateVal + 'deg)'
		// 设置旋转时的动画  匀速 0.1s
		img.style.transition = '0.1s linear'
	}, 100)
}

HTML

为图片绑定事件 ID

<img id="logo" src="https://static.hexingxing.cn/v2/element/webp/element_main_logo.png" width="38" />

DEMO

https://static.hexingxing.cn/v3/javascript/imgrotate/