如何实现隐藏层渐现渐失？

leo_boy 2007-06-17 10:53:44

1.在第二处放一个div,div中再放一个img,并且这个div是隐藏的，只有鼠标指向时才显示，如：
<div id="c" style="display:none"><img id="i" /></div>

2.将第一处的每个数字加两个事件，一个是鼠标指向时，一个是鼠标离开时，如：
<a href="#" onmouseover="a('1.jpg');" onmouseout="b();">1</a>
<a href="#" onmouseover="a('2.jpg');" onmouseout="b();">2</a>
...

3.然后定义a,b两个事件，如：
function a(url)
{
//找到包含图片的层
var d = document.getElementById("c");
//显示图片
document.getElementById("i").src = url;
//显示层
d.style.display = "";
}

function b()
{
//隐藏层
document.getElementById("c").style.display = "none";
}

怎么把这段显示隐藏层代码，添加onmouseover渐现onmouseout渐失的效果？

...全文

688 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

yang0000meng 2009-09-11

打赏
举报

js控制div层渐隐渐显
//设置透明度 function setOpacity(obj, value){ if(document.all){ if(value == 100){ obj.style.filter = ""; }else{ obj.style.filter = "alpha(opacity=" + value + ")"; } }else{ obj.style.opacity =value / 100 ; } } //用setTimeout循环减少透明度 function changeOpacity(obj, startValue, endValue, step, speed){ if(step >= 0 && startValue <= endValue || step <= 0 && startValue >= endValue){ document.body.removeChild(obj); return; } if(!obj) { return; } if(startValue<=0) { document.body.removeChild(obj); return; } setOpacity(obj, startValue); setTimeout(function(){changeOpacity(obj, startValue-step, endValue, step, speed);}, speed); } //设置隐藏速度或显示速度和id function showMsg(id){ var msg =document.getElementById(id); var step = 5, speed = 80; if(msg.style.display=="none") { msg.style.display=""; } changeOpacity(msg, 100, 0, step, speed); }

http://www.wearelearn.net/javascript/jsData_12_51/574.html

RUN_ 2007-06-26

打赏
举报

right,用滤镜，在IE和FireFox中都很好实现。。

leo_boy 2007-06-20

打赏
举报

shuangbaby 2007-06-20

打赏
举报

建议LZ去下个efect.js效果库，里面提供的好多的效果绚死了~

官方站是这个：http://script.aculo.us

我也有，可以发给你

leo_boy 2007-06-20

打赏
举报

渐现渐失可以实现了。我现在是想把我发的那两个函数结合成一个。也就是onmouseover的时候同时触发渐现和传递参数

12789 2007-06-20

打赏
举报

利用js的超时来控制css滤镜
filter:Alpha(style=0,opacity=10)
firefox下用
-moz-opacity:0.1

ImN1 2007-06-20

打赏
举报

ff虚化渐隐比较难，可能需要预加载一些特殊的透明图片
楼主有没有考虑div渐小至隐藏？可以通过改变div（或者clip）的尺寸+overflow:hidden实现

EYESPACE 2007-06-20

打赏
举报

用滤镜实现

kabakaba 2007-06-19

打赏
举报

leo_boy 2007-06-19

打赏
举报

<!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>
</head>
<body>
<div id="div" style="width:200px;height:200px;background-color:#ddeeff;filter:Alpha(Opacity=0);opacity:0;">asdfasdfsadfsadfasdfasdfsd</div>
</body>
<script type="text/javascript">
var o = document.getElementById("div");
var i=0;
function change(){
i++;
o.style.filter = "Alpha(Opacity=" + i + ")"; //for IE
o.style.opacity = i/100; //for FF
if(i>100) i=100;

}
window.setInterval(change,10);
</script>
</html>

++++++++++++++++++++++++++++

1.在第二处放一个div,div中再放一个img,并且这个div是隐藏的，只有鼠标指向时才显示，如：
<div id="c" style="display:none"><img id="i" /></div>

2.将第一处的每个数字加两个事件，一个是鼠标指向时，一个是鼠标离开时，如：
<a href="#" onmouseover="a('1.jpg');" onmouseout="b();">1</a>
<a href="#" onmouseover="a('2.jpg');" onmouseout="b();">2</a>
...

3.然后定义a,b两个事件，如：
function a(url)
{
//找到包含图片的层
var d = document.getElementById("c");
//显示图片
document.getElementById("i").src = url;
//显示层
d.style.display = "";
}

function b()
{
//隐藏层
document.getElementById("c").style.display = "none";
}

怎么把这段显示隐藏层代码，添加onmouseover渐现onmouseout渐失的效果？

我是js盲啊。。因为我onmouseover，onmouseout要触发传递参数，如何把这两个功能结合成一个函数啊？然后在onmouseover，onmouseout触发。。

kabakaba 2007-06-18

打赏
举报

<div id="div" style="width:200px;height:200px;FILTER: progid:DXImageTransform.Microsoft.BasicImage(opacity=1);background-color:#8F8F8F"> sss</div>

<span onclick="run()"></span>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

studyboyz 2007-06-18