为了账号安全,请及时绑定邮箱和手机立即绑定

求大神 怎么运行不变色

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>透明</title>

<style type="text/css">

    *{

    margin: 0px;

    padding: 0px;

    }

.div1{

width: 200px;

height: 200px;

background: red;

filter: alpha(opacity:30);

opacity: 0.3;

margin: 10px;

float: left;

}

</style>

<script type="text/javascript">

window.onload=function(){

var oDiv=document.getElementsByClassName('div');

for(var i =0; i<oDiv.length;i++){

 

oDiv[i].alpha=30;

oDiv[i].onmouseover=function(){

startmove(this,100);

}

oDiv[i].onmouseout=function(){

startmove(this,30);

}

}}

// var timer=null,

//    speed=0,

//    alpha=30;

function startmove(obj,iTarget){

var speed=0;

clearInterval(obj.timer);

 obj.timer=setInterval(function(){

if(obj.alpha>iTarget){

speed=-10;

}else{

speed=10;

}

  

   if(obj.alpha==iTarget){

    clearInterval(obj.timer);

   }

   else{

     

    obj.alpha+=speed;

       obj.style.filter='alpha(opactiy:"+obj.alpha+")';

       obj.style.opacity=obj.alpha/100;}

    },30)

   }

</script>

</head>

<body>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

</body>

</html>


正在回答

3 回答

这是你的抓取class  JS代码“var oDiv=document.getElementsByClassName('div');”

这是你body里的代码  

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>

<div class="div1"></div>


  应该如下 ‘’var oDiv=document.getElementsByClassName('div1');‘’

  或者如下  ” var oDiv=document.getElementsByTagName('div');”


0 回复 有任何疑惑可以回复我~
var oDiv = document.getElementsByClassName('div');
var oDiv = document.getElementsByClassName('div1');
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>


0 回复 有任何疑惑可以回复我~

filter: alpha(opacity=30);

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113925    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程

求大神 怎么运行不变色

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信