设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › js定时器问题
返回列表 发新帖
查看: 2735|回复: 3

js定时器问题

[复制链接]
woshijunjun
发表于 2021-12-10 21:04:14 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style>
  7. html,body{ height: 100%; margin: 0;}

  9. #top_right{ width:248px; display:block; position:fixed; right:0;top:0;
  10.         background-image:url(top_right.png); background-repeat:no-repeat;
  11. }
  12. /*需要改变的类*/
  13. .t_r_0{background-position:right 0;               height:41px;}
  14. .t_r_1{background-position:right -100px;        height:70px;}
  15. .t_r_2{background-position:right -200px;        height:80px;}
  16. .t_r_3{background-position:right -300px;        height:90px;}
  17. .t_r_4{background-position:right -400px;        height:130px;}
  18. .t_r_5{background-position:right -550px;        height:150px;}
  19. .t_r_6{background-position:right -700px;        height:150px;}


  22. </style>

  24. </head>

  26. <body style="background-color:#008EDE">
  27. <a class="t_r_0" id="top_right" href="#">

  29. </a>
  30. <script>
  31.         var a = document.querySelector("a");
  32.         var b ;
  33.         var c ;
  34.         var i = 0;
  35.         a.addEventListener("mouseover",function(){//鼠标悬停图片下翻
  36.                 var b = setInterval(function()
  37.                 {
  38.                         i++;
  39.                         if(i<=6)
  40.                         {
  41.                                 a.className = 't_r_'+i;
  42.                                 console.log(i)
  43.                         }
  44.                         else
  45.                         clearInterval(b);
  46.                 },500);
  47.         });
  48.        
  49.         a.addEventListener("mouseout",function(){//鼠标移开图片上翻
  50.                 var c = setInterval(function()
  51.                 {
  52.                        
  53.                         if(i==0)
  54.                         {
  55.                                 clearInterval(c);
  56.                         }
  57.                         else
  58.                         {
  59.                                 i--;
  60.                                 a.className = 't_r_'+i;
  61.                         }
  62.                 },500);
  63.         });
  64. </script>



  68. </body>
  69. </html>
复制代码


鼠标移开的时候有问题
首先是无法回到全部消失的情况，然后还有就是图片变化的时候会出现往复的情况，实在不知道咋改了
求大神指教！
top_right.png
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

kogawananari
发表于 2021-12-11 10:37:59 | 显示全部楼层
求求你了用css的hover+过度
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

kogawananari
发表于 2021-12-11 10:38:55 | 显示全部楼层
js的话只能递归调用requestAnimationFrame 而不是定时器
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

woshijunjun
 楼主| 发表于 2021-12-11 11:38:15 | 显示全部楼层
kogawananari 发表于 2021-12-11 10:38
js的话只能递归调用requestAnimationFrame 而不是定时器

我们老师是教的就是这
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-19 20:45

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表