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

时间：2022-06-25 21:58:19 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

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/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">

</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 oimg")[0].offsetWidth;
      var oimg")[0].offsetHeight;
      this.firstChild.style.px";
   this.firstChild.style.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="https://img.111com.net/get_pic/2013/07/11/20130711074832708.jpg"   /></li>
    <li><div class="alt"><a href=""><h3>第二幅</h3><p>纯手工雕刻的哦</p></a></div><a href="https://img.111com.net/get_pic/2013/07/11/20130711074839726.jpg" class="js-smartPhoto-pc" target="_blank"><img  src="https://img.111com.net/get_pic/2013/07/11/20130711074839726.jpg"   /></a></li>
 <li><div class="alt"><a href=""><h3>第三幅</h3><p>小桥流水人家</p></a></div><img  src="https://img.111com.net/get_pic/2013/07/11/20130711074845255.jpg"   /></li>
 <li><div class="alt"><a href=""><h3>第四幅</h3><p>又一幅小桥流水人家</p></a></div><a href="https://img.111com.net/get_pic/2013/07/11/20130711074851307.jpg" class="js-smartPhoto-pc" target="_blank"><img  src="https://img.111com.net/get_pic/2013/07/11/20130711074851307.jpg"   /></a></li>
 <li><div class="alt"><a href=""><h3>第五幅</h3><p>游民咖啡店</p></a></div><img  src="https://img.111com.net/get_pic/2013/07/11/20130711074857962.jpg"   /></li>
 <li><div class="alt"><a href=""><h3>第六幅</h3><p>动物世界</p></a></div><a href="https://img.111com.net/get_pic/2013/07/11/20130711074904754.jpg" class="js-smartPhoto-pc" target="_blank"><img  src="https://img.111com.net/get_pic/2013/07/11/20130711074904754.jpg"   /></a></li>
  </ul>
</div>
</body>
</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程