海量企業(yè)網(wǎng)站模板 · 任您選擇
美出特色，精出品質(zhì)，一切為了企業(yè)更好的營銷
js鼠標懸停在圖片上顯示文字提示效果
鼠標懸停，文字提示
本文章來給大家推薦一款不錯的js鼠標懸停在圖片上顯示文字提示效果，在很多網(wǎng)站可看到像網(wǎng)易相冊就有這js鼠標懸停效果哦。
<!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>面向?qū)ο?lt;/title>
<style type="text/css">
<!--
body {font-size: 14px;line-height: 24px;margin: 0px;padding: 0px;}
ul,li{margin:0px;padding:0px;list-style-type:none;}
img{border:0px;}
h3,p{margin:0px;padding:0px;}
h3{margin-top:50px;}
#show{width:724px;height:364px;border:#ccc 1px solid;margin:10px;overflow: hidden;}
li{float:left;margin-top:1px;margin-left:1px;height:180px;width:240px;overflow: hidden;}
#show .alt{position: absolute;background:#000;display:none;text-align:center;}
a,a:hover{color: #FFFFFF;text-decoration: none;}
-->
</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=""><h3>第一幅</h3><p>好久不見的向日葵</p></a></div><img src="http://filesimg.111cn.net/2013/07/11/20130711074832708.jpg" width="240" height="180" /></li>
<li><div class="alt"><a href=""><h3>第二幅</h3><p>純手工雕刻的哦</p></a></div><img src="http://filesimg.111cn.net/2013/07/11/20130711074839726.jpg" width="240" height="180" /></li>
<li><div class="alt"><a href=""><h3>第三幅</h3><p>小橋流水人家</p></a></div><img src="http://filesimg.111cn.net/2013/07/11/20130711074845255.jpg" width="240" height="180" /></li>
<li><div class="alt"><a href=""><h3>第四幅</h3><p>又一幅小橋流水人家</p></a></div><img src="http://filesimg.111cn.net/2013/07/11/20130711074851307.jpg" width="240" height="180" /></li>
<li><div class="alt"><a href=""><h3>第五幅</h3><p>游民咖啡店</p></a></div><img src="http://filesimg.111cn.net/2013/07/11/20130711074857962.jpg" width="240" height="180" /></li>
<li><div class="alt"><a href=""><h3>第六幅</h3><p>動物世界</p></a></div><img src="http://filesimg.111cn.net/2013/07/11/20130711074904754.jpg" width="240" height="180" /></li>
</ul>
</div>
</body>
</html></td>
</tr>
</table>
