鼠标移入移出图片下端div渐渐向上显示出来
鼠标移入移出图片下端div逐渐向上显示出来
html代码
函数到 oLi[i].onmouseover ，oLi[i].onmouseout的时候，显示startMove函数中clearInterval(obj.timer);出错
错误代码：Uncaught TypeError: Cannot read property 'timer' of undefined index.html:51
startMove index.html:51
oLi.(anonymous function).onmouseout
每次移入移除图片都会出现相同的错误！！
------解决思路----------------------
html代码
<html>
<head>
<title>凡客动画三</title>
<style>
* {padding:0; margin:0}
body{behavior:url("csshover.htc");text-align:center;}
ul{width:988px;height:350px;list-style:none;position:relative;margin:450px auto;}
#div1{width:988px;height:175px;list-style:none;position:absolute;top:0;}
#div2{width:988px;height:175px;list-style:none;position:absolute;bottom:0;}
li{width:247px;height:175px;float:left;position:relative;top:0;}
.imgbg
{width:247px;height:175px;position:absolute;top:0;left:0;background:#000;filter:alpha
(opacity:50);opacity:0.5;}
.imgbg:hover{filter:alpha(opacity:0);opacity:0;}
.div3{width:247px;height:0px;filter:alpha(opacity:20);opacity:0.2;background:red;text-
align:center;color:#FFFFFF;position:absolute;bottom:0px;}
.div3 h3 {font-size:15px;padding-top:15px;padding-bottom:5px;}
.div3 p {font-size:12px;}
</style>
<script>
window.onload=function ()
{
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oUl=document.getElementById('ul1');
var oLi=oUl.getElementsByTagName('li');
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,json,num,fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function() {
var bStop=true;
for(var attr in json)
{
var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj,attr)*100));
}
else
{
cur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/num;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr])
bStop=false;
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
},30);
}
for(var i=0;i<oLi.length;i++)
{
var change_top1=oLi[i].offsetTop-350;
startMove(oLi[i],{top:change_top1},i+4);
}
for(var i=0;i<oLi.length;i++)
{
var arr=new Array();
arr[i]=oLi[i].getElementsByTagName('div')[1];
oLi[i].onmouseover=function ()
{
startMove(arr[i],{height:58},6);
};
oLi[i].onmouseout=function ()
{
startMove(arr[i],{height:0},6);
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<div id="div1">
<li>
<img src="index_46.png"/>
<div class="imgbg"></div>
<div class="div3">
<h3>全家官网设计</h3>
<p>让您的生活更加便利，同时让每位来到...</p>
</div>
</li>
<li>
<img src="index_48.png"/>
<div class="imgbg"></div>
<div class="div3">
<h3>全家官网设计</h3>
<p>让您的生活更加便利，同时让每位来到...</p>
</div>
</li>
<li>
<img src="index_50.png"/>
<div class="imgbg"></div>
<div class="div3">
<h3>全家官网设计</h3>
<p>让您的生活更加便利，同时让每位来到...</p>
</div>
</li>
<li>
<img src="index_52.png"/>
<div class="imgbg"></div>
<div class="div3">
<h3>全家官网设计</h3>
<p>让您的生活更加便利，同时让每位来到...</p>
</div>
</li>
</div>
<div id="div2">
<li>
<img src="index_58.jpg"/>
<div class="imgbg"></div>
<div class="div3">
<h3>全家官网设计</h3>
<p>让您的生活更加便利，同时让每位来到...</p>
</div>
</li>
<li>
<img src="index_59.png"/>
<div class="imgbg"></div>
<div class="div3">
<h3>全家官网设计</h3>
<p>让您的生活更加便利，同时让每位来到...</p>
</div>
</li>
<li>
<img src="index_61.jpg"/>
<div class="imgbg"></div>
<div class="div3">
<h3>全家官网设计</h3>
<p>让您的生活更加便利，同时让每位来到...</p>
</div>
</li>
<li>
<img src="index_63.png"/>
<div class="imgbg"></div>
<div class="div3">
<h3>全家官网设计</h3>
<p>让您的生活更加便利，同时让每位来到...</p>
</div>
</li>
</div>
</ul>
</body>
</html>
函数到 oLi[i].onmouseover ，oLi[i].onmouseout的时候，显示startMove函数中clearInterval(obj.timer);出错
错误代码：Uncaught TypeError: Cannot read property 'timer' of undefined index.html:51
startMove index.html:51
oLi.(anonymous function).onmouseout
每次移入移除图片都会出现相同的错误！！
------解决思路----------------------
for(var i=0;i<oLi.length;i++)
{
oLi[i].onmouseover=function ()
{
startMove(this.getElementsByTagName('div')[1],{height:58},6);
};
oLi[i].onmouseout=function ()
{
startMove(this.getElementsByTagName('div')[1],{height:0},6);
};
}