JavaScript 定时器鼠标移入移出div颜色渐变效果

最新推荐文章于 2022-03-25 16:28:04 发布

hyzhang6

最新推荐文章于 2022-03-25 16:28:04 发布

阅读量639

点赞数

分类专栏： JavaScript 文章标签： javascript setInterval 鼠标

本文链接：https://blog.csdn.net/hyzhang6/article/details/78213850

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
height: 200px;
width: 200px;
background: red;

/*iE和谷歌兼容*/
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
</head>
<body>
<script>
var alpha=30;
var times;
speed=null;
function starmove(iTarget){
var oDiv = document.getElementById("div1");

/*目标深度大于当前spee为正数*/
if (iTarget>alpha) {
speed =10;
}else{
speed=-10;
}
/*定时器改变div颜色*/
times = setInterval(function(){
if (iTarget==alpha) {
clearInterval(times);
}else{
/*每30毫秒alpha加10*/
alpha+=speed;

/*兼容*/
oDiv.style.filter='alpha(opacity:'+alpha+')';
oDiv.style.opacity=alpha/100;
}
},30)
}
window.οnlοad=function(){
/*鼠标移入div*/
var oDiv = document.getElementById("div1");
oDiv.onmouseover =function(){
starmove(100)
}

/*鼠标移除Div*/
oDiv.onmouseout = function(){
starmove(30)
}
}
</script>
<div id="div1">

</div>
</body>
</html>