目录
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/
友情提示:本站所有文章,如无特殊说明或标注,均为何星星原创发布。与此同时,趋于近年来本站的文章内容频繁被他站盗用与机器采集,现已全局禁用网站文字内容操作,了解详情或转载文章请 点此 继续!
0 条评论