模拟网易的一个鼠标悬停在图片上显示文字提示的特效代码

时间：2013-08-20 13:40 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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>
<style type="text/css">

</style>
<script type="text/javascript">
function $(id){return typeof id === "string" ? document.getElementById(id) : id;}
function $$(oParent, elem){return (oParent || document).getElementsByTagName(elem);}
function imgLight(id)
{
    this.oDiv=$(id); 
 this.oImg=$$(oDiv,"img");  
 this.oLi=$$(oDiv,"li"); 
 this.oView=function(Obj)
 {
     var iMain=Obj;
  var iSpeed=1;
        var timer=null;
  iMain.onmouseout=function(){oClose(this);}
        timer=setInterval(function(){
      iMain.style.filter='alpha(opacity='+iSpeed+')';
            iMain.style.opacity=iSpeed/100;
      iSpeed+=1;
      if(iSpeed>=60){clearInterval(timer);}
   },1); 
 }
 this.oClose=function(Obj)
 {
     var oMain=Obj;
  var oSpeed=60;
  var otimer=null;
        otimer=setInterval(function(){
      oMain.style.filter='alpha(opacity='+oSpeed+')';
            oMain.style.opacity=oSpeed/100;
      oSpeed-=1;
      if(oSpeed<=0){clearInterval(otimer);oMain.style.display="none";};
   },1); 
 }
 for(var i=0;i<oLi.length;i++)
 {
     var oThis=oLi[i];
     oThis.onmouseover=function()
  {
      var oWidth=$$(this,"img")[0].offsetWidth;
      var oHeight=$$(this,"img")[0].offsetHeight;
      this.firstChild.style.width=oWidth+"px";
   this.firstChild.style.height=oHeight+"px";
      this.firstChild.style.display="block";
   oView(this.firstChild);
  }
  oThis.onclick=function()
  {
      window.location=$$(this.firstChild,"a")[0].href;
  }
 }
}

window.onload=function()
{
    var newImg=imgLight("show");
}
</script>
</head>
<body>
<div id="show">
  <ul>
    <li><div class="alt"><a href="http://bbs.blueidea.com"><h3>第一幅</h3><p>好久不见的向日葵</p></a></div><img src="http://aihushan.com/pic/1.jpg" width="240" height="180" /></li>
    <li><div class="alt"><a href="http://bbs.blueidea.com"><h3>第二幅</h3><p>纯手工雕刻的哦</p></a></div><img src="http://aihushan.com/pic/2.jpg" width="240" height="180" /></li>
 <li><div class="alt"><a href="http://bbs.blueidea.com"><h3>第三幅</h3><p>小桥流水人家</p></a></div><img src="http://aihushan.com/pic/3.jpg" width="240" height="180" /></li>
 <li><div class="alt"><a href="http://bbs.blueidea.com"><h3>第四幅</h3><p>又一幅小桥流水人家</p></a></div><img src="http://aihushan.com/pic/4.jpg" width="240" height="180" /></li>
 <li><div class="alt"><a href="http://bbs.blueidea.com"><h3>第五幅</h3><p>游民咖啡店</p></a></div><img src="http://aihushan.com/pic/5.jpg" width="240" height="180" /></li>
 <li><div class="alt"><a href="http://bbs.blueidea.com"><h3>第六幅</h3><p>动物世界</p></a></div><img src="http://aihushan.com/pic/6.jpg" width="240" height="180" /></li>
  </ul>
</div>
</body>
</html>

模拟网易的一个鼠标悬停在图片上显示文字提示的特效代码

网页特效