31顶

鼠标悬停在图片上浮出并显示文字提示的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控件

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

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

文章分类LIST >>返回首页

最新游戏

最新新闻