js怎么实现鼠标经过与离开div,执行渐变的效果！
日期：2014-05-16 浏览次数：20434 次
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');
想实现 当鼠标经过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');
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
