马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body{ height: 100%; margin: 0;}
#top_right{ width:248px; display:block; position:fixed; right:0;top:0;
background-image:url(top_right.png); background-repeat:no-repeat;
}
/*需要改变的类*/
.t_r_0{background-position:right 0; height:41px;}
.t_r_1{background-position:right -100px; height:70px;}
.t_r_2{background-position:right -200px; height:80px;}
.t_r_3{background-position:right -300px; height:90px;}
.t_r_4{background-position:right -400px; height:130px;}
.t_r_5{background-position:right -550px; height:150px;}
.t_r_6{background-position:right -700px; height:150px;}
</style>
</head>
<body style="background-color:#008EDE">
<a class="t_r_0" id="top_right" href="#">
</a>
<script>
var a = document.querySelector("a");
var b ;
var c ;
var i = 0;
a.addEventListener("mouseover",function(){//鼠标悬停图片下翻
var b = setInterval(function()
{
i++;
if(i<=6)
{
a.className = 't_r_'+i;
console.log(i)
}
else
clearInterval(b);
},500);
});
a.addEventListener("mouseout",function(){//鼠标移开图片上翻
var c = setInterval(function()
{
if(i==0)
{
clearInterval(c);
}
else
{
i--;
a.className = 't_r_'+i;
}
},500);
});
</script>
</body>
</html>
鼠标移开的时候有问题
首先是无法回到全部消失的情况，然后还有就是图片变化的时候会出现往复的情况，实在不知道咋改了
求大神指教！ | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2021-12-10 21:04:14
置顶卡
千斤顶
显身卡
发表于 2021-12-11 10:37:59
楼主