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

时间  2019-12-07
标签 如何 实现 鼠标 放在 图片 出现 文字说明 效果 繁體版
原文   原文链接

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

 

[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.             width: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.             width: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.             width: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这个属性，写出了如下代码：css

 

 

[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="width: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>  
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程