html鼠标悬停图片显示文字,鼠标悬停在图片上浮出并显示文字提示的JS特效代码...

面向对象

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.οnmοuseοut=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

{

var oThis=oLi[i];

oThis.οnmοuseοver=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.οnclick=function()

{

window.location=$$(this.firstChild,"a")[0].href;

}

}

}

window.οnlοad=function()

{

var newImg=imgLight("show");

}

• 第一幅

  好久不见的向日葵

  

• 第二幅

  纯手工雕刻的哦

  

• 第三幅

  小桥流水人家

  

• 第四幅

  又一幅小桥流水人家

  

• 第五幅

  游民咖啡店

  

• 第六幅

  动物世界