zoukankan      html  css  js  c++  java

  • 如何实现鼠标放在图片上出现文字说明效果？

    最近在浏览网页时，看到一些图片，鼠标一放上去呢，就会有说明文字“浮”上来，移开又“沉”下去，感觉好炫！自己就在网上找实现代码啊，看看事件是怎么实现的！然后就找到了如下的代码：

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <meta charset=" utf-8">  
    5.     <meta name="author" content="http://www.softwhy.com/" />  
    6.     <title>蚂蚁部落</title>  
    7.     <style type="text/css">  
    8.         .main{  
    9.             738px;  
    10.             height:280px;  
    11.             margin:0px auto;  
    12.             border:5px solid #696;  
    13.             position:relative;  
    14.         }  
    15.         a{text-decoration:none}  
    16.         .main .cite{  
    17.             738px;  
    18.             position:absolute;  
    19.             bottom:0px;  
    20.             left:0px;  
    21.             text-align:center;  
    22.             -moz-opacity:0.5;  
    23.             filter:alpha(opacity=50);  
    24.             opacity:0.5;  
    25.             background:#333;  
    26.             border-bottom:2px solid #000;  
    27.             border-top:2px solid #000;  
    28.             color:white;  
    29.             overflow:hidden;  
    30.             display:none;  
    31.         }  
    32.         .main .word{  
    33.             position:absolute;  
    34.             height:0px;  
    35.             738px;  
    36.             text-align:center;  
    37.             bottom:0px;  
    38.             left:0px;  
    39.             color:white;  
    40.             display:block;  
    41.             overflow:hidden;  
    42.         }  
    43.     </style>  
    44.     <script type="text/javascript">  
    45.         var speed=10;  
    46.         var citeH=0;  
    47.         var flag;  
    48.         window.onload=function(){  
    49.             var cite=document.getElementById("cite");  
    50.             var word=document.getElementById("word");  
    51.             var main=document.getElementById("main");  
    52.   
    53.             function addHeight(){  
    54.                 clearInterval(flag);  
    55.                 cite.style.display="block";  
    56.                 if(citeH<86){  
    57.                     citeH=citeH+1;  
    58.                     cite.style.height=citeH+"px";  
    59.                     word.style.height=citeH+"px";  
    60.                 }  
    61.                 else{  
    62.                     clearInterval(flag);  
    63.                     return;  
    64.                 }  
    65.                 flag=setInterval(addHeight,speed);  
    66.             }  
    67.   
    68.             function reduceHeight(){  
    69.                 clearInterval(flag);  
    70.                 if(citeH>0){  
    71.                     citeH=citeH-1;  
    72.                     cite.style.height=citeH+"px";  
    73.                     word.style.height=citeH+"px";  
    74.                 }  
    75.                 else{  
    76.                     clearInterval(flag);  
    77.                     cite.style.display="none";  
    78.                     return;  
    79.                 }  
    80.                 flag=setInterval(reduceHeight,speed);  
    81.             }  
    82.   
    83.             if(main.addEventListener){  
    84.                 main.addEventListener("mouseover",addHeight,false);  
    85.                 main.addEventListener("mouseout",reduceHeight,false);  
    86.             }  
    87.             else{  
    88.                 main.attachEvent("onmouseover",addHeight);  
    89.                 main.attachEvent("onmouseout",reduceHeight);  
    90.             }  
    91.         }  
    92.     </script>  
    93. </head>  
    94. <body>  
    95. <div class="main" id="main">  
    96.     <a href="#">  
    97.         <img src="1.jpg" border="0">  
    98.         <div class="cite" id="cite"></div>  
    99.         <div class="word" id="word">爱护大自然，共享自然风光</div>  
    100.     </a>  
    101. </div>  
    102. </body>  
    103. </html>  


    恩呢，放在编译器里，的确有效果，的确是我想象中的那样，可是，我自己感觉写的太复杂了，挺简单的一个问题对吧？然后就自己写了，刚开始有点小问题，不知道怎么实现那个上浮效果，最后想到了overflow这个属性，写出了以下代码：

    [html] view plain copy
     
      1. <html xmlns="http://www.w3.org/1999/xhtml">  
      2. <head>  
      3.     <meta http-equiv="content-type" content="txex/html charset=utf-8" >  
      4.     <script src="jquery-1.11.1.js"></script>  
      5.     <style type="text/css">  
      6.         body{  
      7.   
      8.             font-family: simhei;  
      9.         }  
      10.         p{  
      11.             color: #ffffff;  
      12.         }  
      13.         div{  
      14.             overflow: hidden;  
      15.         }  
      16.         </style>  
      17.     <script type="text/javascript">  
      18.         $(document).ready(function(){  
      19.   
      20.             $(".pic").mouseover(function()  
      21.   
      22.   
      23.             {  $(".he").animate({top:'280px'},500);})  
      24.   
      25.             $(".pic").mouseout(function()  
      26.   
      27.                     {$(".he").animate({top:'330px'},500);}  
      28.             )  
      29.             });  
      30.         </script>  
      31. </head>  
      32. <body>  
      33. <div style="position: relative">  
      34.     <img src="test.png"  class="pic">  
      35.      <div style="231px;height: 50px;background-color: orange;position: absolute;top:330px" class="he">  
      36.           <p align="center" >开始答题</p>  
      37.         </div>  
      38.     </div>  
      39. </body>  
      40. </html>  
  • 相关阅读:
    stringify 字符串转化成json方法
    leetcode每日刷题计划-简单篇day22
    leetcode每日刷题计划-简单篇day21
    leetcode每日刷题计划-简单篇day20
    leetcode每日刷题计划-简单篇day19
    leetcode每日刷题计划-简单篇day18
    leetcode每日刷题计划-简单篇day17
    leetcode每日刷题计划-简单篇day16
    leetcode每日刷题计划-简单篇day15
    leetcode每日刷题计划-简单篇day14
  • 原文地址：https://www.cnblogs.com/woodyliang/p/6497695.html
Copyright © 2011-2022 走看看