js如何实现鼠标经过与离开div,执行渐变的效果！急！！
想实现 当鼠标经过div时 栏目标题先向上移动，然后慢慢显示内容出来，当鼠标离开div时按相反的动作效果执行
但我做的效果并不理想。。。。请高手更改实现。。。急！！！
<!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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function isMouseLeaveOrEnter(e, handler) {
if (e.type != 'mouseout' && e.type != 'mouseover') return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != handler)
reltg = reltg.parentNode;
return (reltg != handler);
}
var start1;
var start2;
function showMenu()
{
start1=window.setInterval("shoppingcat()",80);
}
function shoppingcat()
{
var s=2;
var divObj=document.getElementById('up1');
var divObjs=document.getElementById('down1');
var aa=parseInt(divObj.style.marginTop);
var bb=parseInt(divObj.style.marginBottom);
if(aa>=0)
{
divObj.style.marginTop=aa-s;
if(aa==0)
{
window.clearInterval(start1);
divObj.style.marginBottom=5+"px";
divObjs.style.display="block";
moveLeft();
}
}
}
//内容 逐渐显示出来
var distance=0;
var moveLeft=function(){
distance=0; //初始值为0
var obj1=document.getElementById('front1');
var width=obj1.offsetWidth;
var height=obj1.offsetHeight;
moveLeft.obj=obj1;
start2=window.setInterval('move('+height+')',240);
}
function move(height)
{
if(distance<height)
{
distance+=4; //每次调用 增加 4
moveLeft.obj.style.top=parseInt(moveLeft.obj.style.top)+distance+'px';
}
else if(distance>height)
{
window.clearInterval(start2);
}
}
var end1;
var end2;
var distances=0;
var closeMenu=function(){
distances=0; //初始值为0
var obj1=document.getElementById('front1');
obj1.style.top=distance+"px";
closeMenu.obj=obj1;
end1=window.setInterval("moveOut()",120); // 表示向上
}
function moveOut()
{
if(distances<distance)
{
distances+=4; //每次调用 增加 4
closeMenu.obj.style.top=distance-distances+'px';
}
else
{
window.clearInterval(end1);
end2=window.setInterval("shoppingcats()",80);
}
}
var _s=0;
function shoppingcats()
{
var _divObj=document.getElementById('up1');
var _divObjs=document.getElementById('down1');
var _aa=parseInt(_divObj.style.marginTop);
var _bb=parseInt(_divObj.style.marginBottom);
if(_s<10)
{
_s=_s+2;
_divObj.style.marginTop=_s+"px";
if(_s==10)
{
window.clearInterval(end2);
_divObj.style.marginBottom=60+"px";
if(_divObjs.style.display="block"){
_divObjs.style.display="none";
}
}
}
}
</script>
</head>
<body>
<div style="width:236px; height:159px; display:block; border:1px solid #003399; font-size:12px;" onmouseover="if (isMouseLeaveOrEnter(event,this))showMenu();" onmouseout="if (isMouseLeaveOrEnter(event,this))closeMenu();">
<table width="236" height="159" border="0" cellpadding="0" cellspacing="0" background="img/kbg.jpg">
<tr>
<td valign="top"><table width="211" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="15"><img src="img/1.gif" width="1" height="1" /></td>
</tr>
<tr>
<td><table width="211" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="106" height="129"><a href="about.aspx?id=1"><img src="img/kuaiimg/m-1.jpg" width="90" height="112" border="0" alt="左边图片"/></a></td>
<td>
<div>
<div id="up1" style="margin-top:10px;margin-bottom:60px;"><a href="about.aspx?id=1"><img src="img/kuaiimg/l-1.jpg" width="92" height="22" border="0" alt="栏目标题"/></a></div>
<div id='down1' style='background:#FFF;width:100px;height:90px;position:relative;overflow:hidden; display:none;'>
<div id='front1' style='position:absolute;left:0;top:0;width:100px;height:90px;background:#FFFFFF;z-index:10;'> </div>
<div id='back1' style='position:absolute;left:0;top:0;width:100px;height:80px;background:#FFFFFF;z-index:9;'>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15"><img src="img/bit.gif" width="3" height="3" align="absmiddle" /> <span class="STYLE1"><a href="about.aspx?id=1" class="STYLE1">公司动态</a></span></td>
</tr>
<tr>
<td background="img/line.jpg"><img src="img/line.jpg" width="6" height="1" /></td>
</tr>
<tr>
<td height="15"><img src="img/bit.gif" width="3" height="3" align="absmiddle" /> <span class="STYLE1"><a href="about.aspx?id=5" class="STYLE1">发展历程</a></span></td>
</tr>
<tr>
<td background="img/line.jpg"><img src="img/line.jpg" width="6" height="1" /></td>
</tr>
<tr>
<td height="15"><img src="img/bit.gif" width="3" height="3" align="absmiddle" /> <span class="STYLE1"><a href="about.aspx?id=6" class="STYLE1">行业新闻</a></span></td>
</tr>
<tr>
<td background="img/line.jpg"><img src="img/line.jpg" width="6" height="1" /></td>
</tr>
<tr>
<td height="15"><img src="img/bit.gif" width="3" height="3" align="absmiddle" /> <span class="STYLE1"><a href="about.aspx?id=7" class="STYLE1">下属机构</a></span></td>
</tr>
<tr>
<td background="img/line.jpg"><img src="img/line.jpg" width="6" height="1" /></td>
</tr>
</table>
</div>
</div>
</div>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
[解决办法]
这么长也不想看。
你可以设计下用div 的overflow hidden就是超出隐藏。不停的改变DIV的大小。
[解决办法]
鼠标移动事件不应该加在大div上，放在小的div上这样应该可以实现你的！
也就是div=up1 div=down1
[解决办法]
用juqery sildeUp() sildeDown()
[解决办法]
