今天写了一段 javascript代码,想实现这样的
效果:
有图片A和图片B,
A是图片B的缩小图,
B是原图
我想实现当
鼠标移进(onmou
seover)A时,图片B淡入,alpha透明度由0递增;
当鼠标移出(onmouserout)A时,图片B淡出,alpha减到0.
代码如下:调试之后还是有点问题,哪位能指点一下,我是希望把效果做得好看一点,完美一点,不是故意要搞这么复杂
<html>
<body>
<img src="1.gif" id="sImg" width="150" height="150">
<div id="big">
<img src="1.gif" id="bImg" style="filter:alpha(opacity=0)">
</div>
<script type="text/javascript">
sImg=document.getElementById("sImg");
bImg=document.getElementById("bImg");
big=document.getElementById("big");
function show()
{
if(bImg.filters.alpha.opacity<=100)
{
big.style.position="absolute";
//big.style.left=event.clientX+10;
//big.style.top=event.clientY+10";
big.style.left=sImg.offsetLeft+sImg.width+10;
big.style.top=sImg.offsetTop+sImg.height*2/3;
bImg.filters.alpha.opacity+=5;
kk=setTimeout("show()",100);
}
if(bImg.filters.alpha.opacity>=100)
clearTimeout(kk);
}
function hidden()
{
bImg.filters.alpha.opacity=0;
if(bImg.filters.alpha.opacity>=0)
{
bImg.filters.alpha.opacity-=5;
timer=setTimeout("hidden()",50);
}
if(bImg.filters.alpha.opacity<=0)
clearTimeout(timer);
}
</script>
</body>
</html>
拜托了
