Day17-小功能系列:盒子的旋转

最新推荐文章于 2025-05-08 20:44:12 发布

Shark1300

最新推荐文章于 2025-05-08 20:44:12 发布

阅读量495

点赞数

CC 4.0 BY-SA版权

分类专栏： js基础文章标签： js小功能

本文链接：https://blog.youkuaiyun.com/Scan_13286/article/details/84452876

js基础专栏收录该内容

14 篇文章

订阅专栏

这篇博客介绍了一个小功能——使用JavaScript实现盒子旋转效果。当鼠标悬停时，盒子顺时针旋转，移开时逆时针旋转回到初始位置。通过HTML创建基本结构，CSS设置圆形样式，JavaScript实现旋转动画，利用全局变量跟踪旋转角度并设定条件停止旋转。在处理鼠标移入移出事件时，注意清除定时器以避免冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Day17-小功能系列:盒子的旋转

功能描述：当鼠标放在盒子上，盒子进行顺时针转动，转动完一圈后停止；当鼠标移开，盒子进行逆时针转动，回到初始位置停止。

1.HTML界面

前端界面和简单，随便创建一个div

<div class="test">这是旋转的盒子</div>

2.Css样式

主要将创建的div变成一个圆形，当然可有可无。

.test{
	width:100px;
	height:100px;
	text-align:center;
	font-size:12px;
	line-height:100px;
	border:1px solid #000;
	border-radius:50px;
}

3.JavaScript代码

主要的功能实现。
程序思路：首先获取这个div并添加hover方法。【注：hover方法包括两个函数，一个移入，一个移出】

$(".test").hover(function(){},function(){});

在移入方法中再次获取div，并添加css样式：transform:rotate()。

$(".test").hover(function(){
	$(".test").css({transform:"rotate()"});
},function(){});

考虑到rotate的值要一直变化，所以声明一个全局变量“i”来记录角度。并且声明一个定时器“Time”来使角度发生变化。

var i = 0; //初始化i
var Time;  //记录定时器
$(".test").hover(function(){
	Time = setInterval(function(){
		//使用i来记录角度
		$(".test").css({transform:"rotate("+i+"deg)"});
		i++;
	},1)
},function(){});

已经完成旋转的功能了，接着要考虑到旋转一周期停止，则需要添加if(){}判断。

var i = 0; //初始化i
var Time;  //记录定时器
$(".test").hover(function(){
	Time = setInterval(function(){
		//使用i来记录角度
		$(".test").css({transform:"rotate("+i+"deg)"});
		if(i >= 360){
			clearInterval(Time);
		}
		i++;
	},1)
},function(){});

为什么将i++放在判断后面？
因为如果放在前面，那么定时器会在360的时候多执行一轮，故放在判断后面。

接下来，如法炮制，用同样的思路写移出方法，把移入的i++改为i–；并且更改判断语句。

var i = 0; //初始化i
var Time;  //记录定时器
$(".test").hover(function(){
	Time = setInterval(function(){
		//使用i来记录角度
		$(".test").css({transform:"rotate("+i+"deg)"});
		if(i >= 360){
			clearInterval(Time);
		}
		i++;
	},1)
},function(){
	Time = setInterval(function(){
			//使用i来记录角度
			$(".test").css({transform:"rotate("+i+"deg)"});
			if(i >= 0){
				clearInterval(Time);
			}
			i--;
		},1)
});

之后还会遇到一个问题，就是鼠标一边移入一边移出，这时函数会同时执行多个定时器，所以在执行移入移出两个方法时，要清除各自的定时器。
并且方法要在加载方法中执行。

var i = 0; //初始化i
var Time;  //记录定时器

$(function(){
	$(".test").hover(function(){
		Time = setInterval(function(){
			//清除各自定时器
			clearInterval(Time);
			//使用i来记录角度
			$(".test").css({transform:"rotate("+i+"deg)"});
			if(i >= 360){
				clearInterval(Time);
			}
			i++;
		},1);
	},function(){
		Time = setInterval(function(){
				//清除各自定时器
				clearInterval(Time);
				//使用i来记录角度
				$(".test").css({transform:"rotate("+i+"deg)"});
				if(i >= 0){
					clearInterval(Time);
				}
				i--;
			},1);
	});
});

完成