欢迎来到亿搜云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

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

       悬停     2016-03-01     eycms     2747     0    

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>


--结束END--

本文链接: http://eycms.cn/resources/hover/1536.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“亿搜云”
"亿搜云平台前端开发教学"
每日干货技术分享
 

×

成为 亿搜云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

亿搜云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 40819446

客服电话: 15250286283

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

亿搜云平台手机端