js鼠标事件，鼠标悬停图片转动

最新推荐文章于 2024-03-29 22:17:51 发布

Rebirth.新手上路

最新推荐文章于 2024-03-29 22:17:51 发布

阅读量512

点赞数 9

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_59549707/article/details/134715636

版权

大学生作业！

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   <style type="text/css">
       *{
           margin: 0 auto;
           padding: 0;
           text-align: center;
       }
       .aa{
           width: 1080px;
           height: 800px;


       }
       img{
           margin-top: 50px;
           width: 400px;
           height: 400px;

       }
   </style>

   </head>
   <body>
       <div class="aa">
<img src="img/手机.jpg" id="img01" οnmοuseοver="zhuan()" οnmοuseοut="budong()"/>
       </div>
<script>
   //记录旋转角度的变量
var current = 0;

//鼠标悬停执行js代码 onmouseover
img01.onmouseover = function zhuan() {
//每次点击鼠标左键 current都会增加90
current += 90;

this.style.transform = 'rotate(' + current + 'deg)';
}
//鼠标移开执行js代码 onmouseout
img01.οnmοuseοut=function budong(){
   current -=90;
   this.style.transform='rotate(' + current + 'deg)';
}
</script>
   </body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Rebirth.新手上路

关注关注

9
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js鼠标事件，鼠标悬停图片转动

img src="img/手机.jpg" id="img01" onmouseover="zhuan()" onmouseout="budong()"/>//每次点击鼠标左键 current都会增加90。//鼠标悬停执行js代码 onmouseover。//鼠标移开执行js代码 onmouseout。//记录旋转角度的变量。
复制链接

扫一扫