<form id="z5bpp"></form>
<address id="z5bpp"><nobr id="z5bpp"><progress id="z5bpp"></progress></nobr></address>
<span id="z5bpp"></span>

<noframes id="z5bpp"><address id="z5bpp"><nobr id="z5bpp"></nobr></address>

<address id="z5bpp"></address>

    歡迎來到億搜云建站平臺,全網營銷云系統加盟中心!

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

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

    隱藏側欄
    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.donationvalues.com/resources/hover/1536.html (轉載時請注明來源鏈接)

     
    本文標簽: 全部

    下班PC閱讀不方便?

    手機也可以隨時學習開發

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

    ×

    成為 億搜云平臺 代理商!

    關注

    微信
    關注

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

    億搜云平臺公眾號

    客服

    聯系
    客服

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

    聯系客服:

    在線QQ: 40819446

    客服電話: 15250286283

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

    工作時間:

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

    WAP

    手機
    訪問

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

    億搜云平臺手機端

    XXXX国产一二三区XXXX