图片特效展示（鼠标移入移除特效）

来源：互联网发布：mac好用的炒股软件编辑：程序博客网时间：2024/05/18 00:30

太久没动手了，又断续复习一些以前学过的东西。今天我写的是一个图片展示特效。鼠标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.onload=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].onmouseover=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].onmouseout=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>

展示效果如下：

0 0