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()"})