太久没动手了，又断续复习一些以前学过的东西。今天我写的是一个图片展示特效。鼠标onmouseover图片的时候，介绍缓慢出现；移除时候介绍回到原位。代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>图片展示特效</title><style>*{margin:0;padding: 0;}#picList{width:1300px;margin:100px auto;}.col{float: left; width: 192px; overflow: hidden; margin-right: 10px;position: relative}.col img{border:0;display: block;}.col a{position: absolute;}.col img{width: 100%;}.col a{ display:block;width: 192px;height: 288px; background-color:#000;top:255px;color:#fff; line-height: 30px; text-decoration: none;}#pic</style></head><body><div class='picList' id="picList"><div class='col' id="pic1" > <img src="images/P_00.jpg" /><a href='#'>学会html5 绝对的屌丝逆袭<br/>本课程由浅入深，逐步推进，以示例为主线，详细完整地介绍HTML5的新功能与新特征</a> </div><div class='col' id="pic2"> <img src="images/P_01.jpg" /><a href='#'>圆角水晶按钮制作<br/>网页中的圆角按钮和宽度自适应按钮就这么轻松制作！</a> </div><div class='col' id="pic3"> <img src="images/P_02.jpg" /><a href='#'>导航条菜单的制作<br/>30分钟教你轻松制作出各种形式的网站导航条菜单</a> </div></div><script>window.οnlοad=function(){var divs=document.getElementById('picList').getElementsByTagName('div');//var timer=null;for(var i=0;i<divs.length;i++){divs[i].timer=null;//鼠标放上时候缓慢出现divs[i].οnmοuseοver=function(){var a=this.getElementsByTagName('a')[0];//var speed=30; if(this.timer){clearInterval(this.timer);}this.timer=setInterval(function(){ var speed=(0-a.offsetTop)/8;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(a.offsetTop<=0){clearInterval(this.timer);}else{a.style.top=a.offsetTop+speed+'px';a.style.opacity="0.5";}},30)};//鼠标移除时候a标签消失divs[i].οnmοuseοut=function(){var a=this.getElementsByTagName('a')[0];//var speed=30; if(this.timer){clearInterval(this.timer);}this.timer=setInterval(function(){ var speed=(255-a.offsetTop)/8;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(a.offsetTop>=255){clearInterval(this.timer);}else{a.style.top=a.offsetTop+speed+'px';//a.style.cssText="opacity:1;";}},30)};//鼠标事件到此结束} }</script></body></html>
展示效果如下：
