我要实现多个div的淡入淡出，现在效果上有点小问题，大家看看我这段代码哪里出问题了
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:200px; height:200px; background:red; margin:10px; float:right; filter=alpha(opacity:30); opacity:0.3; }
</style>
<script>
window.onload=function()
{
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++)
{
//aDiv.timer=null;
aDiv[i].alpha=30;
aDiv[i].onmouseover=function()
{
getMove(this,100);
}
aDiv[i].onmouseout=function()
{
getMove(this,30);
}
}
}
//var alpha=30;
function getMove(obj,alt)
{
clearInterval(obj.timer);
obj.tiemr=setInterval(function()
{
var speed=(alt-obj.alpha)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.alpha==alt)
{clearInterval(obj.timer);}
else{
obj.alpha+=speed;
obj.style.filter='alpha(opacity:'+obj.alpha+')';
obj.style.opacity=obj.alpha/100;
}
},30)
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:200px; height:200px; background:red; margin:10px; float:right; filter=alpha(opacity:30); opacity:0.3; }
</style>
<script>
window.onload=function()
{
var aDiv=document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++)
{
//aDiv.timer=null;
aDiv[i].alpha=30;
aDiv[i].onmouseover=function()
{
getMove(this,100);
}
aDiv[i].onmouseout=function()
{
getMove(this,30);
}
}
}
//var alpha=30;
function getMove(obj,alt)
{
clearInterval(obj.timer);
obj.tiemr=setInterval(function()
{
var speed=(alt-obj.alpha)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.alpha==alt)
{clearInterval(obj.timer);}
else{
obj.alpha+=speed;
obj.style.filter='alpha(opacity:'+obj.alpha+')';
obj.style.opacity=obj.alpha/100;
}
},30)
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html> 展开
2个回答
展开全部
最烦看别人代码了。没细看，但首先发现了三个大问题。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
有没有发现少了两个双引号？
然后，你要把getMove函数移到window.onload之前。
想想，浏览器加载你这段代码的时候，先加载window.onload，而此时，
你还没定义getMove函数呢。
而且，你的obj.alpha+=speed，如果speed数值过大，
人眼是看得出来的，这就是过度不平滑的最大原因。
=============================================
还有些小问题：
css的float不要乱用，
alpha属性也少用，尽量用rgba代替alpha。
对于确定的元素位置，不要用margin，直接position:absolute，然后定位top和left。
==============================================
另外：写这么长的js不累么。。。
css3的transition属性用好，比写js方便多了。你这段代码只需要这么写就行了：
<html>
<head>
<meta content="text/html" charset="utf-8"/>
<style>
.divSet {
width: 200px;
height: 200px;
background:rgba(255, 0, 0,1);
margin: 10px;
transition:1s;
position:absolute;
top:10px;
}
.divSet:hover {
background:rgba(255,0,0,0.3);
}
</style>
</head>
<body>
<div class="divSet" style="left:100px;"></div>
<div class="divSet" style="left:350px;"></div>
<div class="divSet" style="left:600px;"></div>
<div class="divSet" style="left:850px;"></div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
obj.tiemr=setInterval(function()
应该是
obj.timer
应该是
obj.timer
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
