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

稿源：互联网 2018-09-03 01:40:02 点击： 23082 撤稿纠错

你鼠标移到图上的时候就会显示文字提示...

以下讨论的是和网易鼠标悬停文字提示相关的鼠标悬停在图片上浮出并显示文字提示的JS特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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">

</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="http://js.alixixi.com"><h3>第一幅</h3><p>好久不见的向日葵</p></a></div><img src="http://www.ali.com/ads/test2.jpg" width="240" height="180" /></li>
    <li><div class="alt"><a href="http://js.alixixi.com"><h3>第二幅</h3><p>纯手工雕刻的哦</p></a></div><img src="http://www.ali.com/ads/test2.jpg" width="240" height="180" /></li>
 <li><div class="alt"><a href="http://js.alixixi.com"><h3>第三幅</h3><p>小桥流水人家</p></a></div><img src="http://www.ali.com/ads/test2.jpg" width="240" height="180" /></li>
 <li><div class="alt"><a href="http://js.alixixi.com"><h3>第四幅</h3><p>又一幅小桥流水人家</p></a></div><img src="http://www.ali.com/ads/test2.jpg" width="240" height="180" /></li>
 <li><div class="alt"><a href="http://js.alixixi.com"><h3>第五幅</h3><p>游民咖啡店</p></a></div><img src="http://www.ali.com/ads/test2.jpg" width="240" height="180" /></li>
 <li><div class="alt"><a href="http://js.alixixi.com"><h3>第六幅</h3><p>动物世界</p></a></div><img src="http://www.ali.com/ads/test2.jpg" width="240" height="180" /></li>
  </ul>
</div>
</body>
</html>

关于鼠标悬停在图片上浮出并显示文字提示的JS特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090389305.shtml方便下次再访问哦。

·上一篇： 从天涯网扒下的始终飘游在网页的底部浮动工具栏js特效！
·下一篇： 一款原生JS编写的文本框输入日历日期选择器JS控件

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

文章分类LIST >>返回首页

最新游戏

最新新闻