飞猪&Firhome's Blog

今天在论坛上看了这个网站下面图片的效果 http://oscar.go.com/

于是自己也想写了一下。

结构：

<div id=”change”>
<img src=”img/02.jpg” alt=”这是一个图片”  />
<div id=”test”>
</div>
</div>

JavaScript：

var change=document.getElementById(“change”),
test=document.getElementById(“test”),
bottom=0,op=100,
pics=change.getElementsByTagName(“img”)[0].alt;
var timer;
test.innerHTML=pics;
change.onmouseover=function(){
clearTimeout(timer); //特别注意，因为冒泡的原因，会做两次动画效果，所以要清除一下，事件注册在img上不会有问题。
timer=setInterval(move1,10);
}
change.onmouseout =function() {
clearTimeout(timer); //特别注意，同上
timer=setInterval(move2,10);
}
function move1(){
if(bottom>=45){clearTimeout(timer);bottom=45;}
bottom+=2;
op=80;
test.style.bottom=bottom+”px”;
test.style.opacity=op/100;
}
function move2(){
if(bottom<=-1){clearTimeout(timer);bottom=-1;}
bottom-=2;
op-=1;
test.style.bottom=bottom+”px”;
test.style.opacity=op/100;
}

标签： 图片, 浮出

这篇文章发布于 2010年03月2日，星期二，16:45，归类于 JavaScript。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。