徐州酷优网络 徐州网站建设优选品牌!开启企业建站营销新时代  站长学院 Loading
热线:0516-83703228
您现在的位置:首页 > 站长学院 > 建站资讯 > 建站、设计教程 > 悬停

js鼠标悬停在图片上显示文字提示效果

作者:eycms 日期:2016-03-01 17:18:53 人气:49

  

js鼠标悬停在图片上显示文字提示效果

鼠标悬停,文字提示

本文章来给大家推荐一款不错的js鼠标悬停在图片上显示文字提示效果,在很多网站可看到像网易相册就有这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>面向对象</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>


回到顶部