js实现头像转动效果

最新推荐文章于 2024-04-16 02:01:51 发布

加班客

最新推荐文章于 2024-04-16 02:01:51 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/CSDN_SunJQ/article/details/102808402

版权

本文介绍如何在前端利用JavaScript实现头像在鼠标悬停时的旋转特效，为网页增添动态交互体验。

摘要由CSDN通过智能技术生成

前端

鼠标悬停旋转特效

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>
	</title>
</head>
<style type="text/css">
	#showImg{
		width: 200px;
		height: 200px;
		border-radius: 50%;
	}
</style>
<body>
	<img  src="./bg1.jpg"  id="showImg"/>
<script>
	/*获取图片实例*/
    var img=document.getElementById('showImg');
	/*定义位置变量*/
    
    
    /*给图片赋予鼠标聚焦事件*/
    img.onmouseover=function () {
		var current = 0;
    	var flag=0;

        /*开启定时执行function函数*/
        var temTemp=setInterval(function(){
           
            if (flag!=90) {
                current = (current + 4) % 360;
                flag++;

                img.onmouseout=function(){
                    clearInterval(temTemp);
                    setInterval(function(){