<dl id="dxz57"><blockquote id="dxz57"></blockquote></dl>
  • <sub id="dxz57"></sub>
    <tr id="dxz57"><p id="dxz57"></p></tr>
    <form id="dxz57"><span id="dxz57"><option id="dxz57"></option></span></form>
  • 
    
      <sub id="dxz57"></sub><form id="dxz57"></form>

      <form id="dxz57"><source id="dxz57"></source></form>

      <form id="dxz57"><span id="dxz57"><track id="dxz57"></track></span></form>
      歡迎來到億搜云建站平臺,全網營銷云系統加盟中心!

      海量企業網站模板 · 任您選擇

      美出特色,精出品質,一切為了企業更好的營銷

      隱藏側欄
      Beta
      轉載

      js鼠標懸停在圖片上顯示文字提示效果

             懸停     2016-03-01     eycms     2746     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://www.thewannadies.com/resources/hover/1536.html (轉載時請注明來源鏈接)

       
      本文標簽: 全部

      下班PC閱讀不方便?

      手機也可以隨時學習開發

      微信關注公眾號“億搜云”
      "億搜云平臺前端開發教學"
      每日干貨技術分享
       

      ×

      成為 億搜云平臺 代理商!

      關注

      微信
      關注

      微信掃一掃
      獲取最新優惠信息

      億搜云平臺公眾號

      客服

      聯系
      客服

      很高興為您服務
      尊敬的用戶,歡迎您咨詢,我們為新用戶準備了優惠好禮。 咨詢客服

      聯系客服:

      在線QQ: 40819446

      客服電話: 13913253836

      售前咨詢 售后服務
      在線交談 智能小云

      工作時間:

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

      WAP

      手機
      訪問

      移動端訪問
      手機上也能選模板

      億搜云平臺手機端

      久久伊人免费