实用资源鼠标指向图片时遮罩层显示文字的代码

鼠标指向图片时遮罩层显示文字的代码

鼠标指向图片的时候出现文字说明的效果,一般在服务类的公司网站上用的较多,使用多张图片介绍公司的主要业务或展示公司的优势,鼠标悬停的效果让网页更有互动性:

鼠标指向出现文字.gif

实现本效果首先要引入Jquery库:

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

CSS部分代码如下:

ul,li,h3 {padding:0;margin:0;}
li {list-style:none;}
a {text-decoration:none;}
.content {width:800px;padding:10px;}
.con {width:250px;height:198px;float:left;margin-right:15px;margin-bottom:15px;position:relative;cursor:default;}
.con img {width:250px;height:198px;}
.txt {position:absolute;left:0;bottom:0;width:100%;height:45px;line-height:45px;text-align:center;color:#fff;background:rgba(0,0,0,0.6);}
.txt p {font-size:14px;line-height:20px;padding:10px;color:#fefefe;display:none;}
.con:hover p {display:block;}
.txt h3 {padding-top:0px;}

JavaScript部分代码如下:

<script>
$(function(){
$(".con").hover(function(){
$(this).find(".txt").stop().animate({height:"198px"},200);
$(this).find(".txt h3").stop().animate({paddingTop:"50px"},200);
},function(){
$(this).find(".txt").stop().animate({height:"45px"},200);
$(this).find(".txt h3").stop().animate({paddingTop:"0px"},200);
})
});
</script>

html部分示例代码如下:

 <div class="content">
  <ul class="contentbox">
   <li class="con">
    <img src="files/class1.jpg" alt="test" />
    <div class="txt">
     <h3>周杰伦</h3>
     <p>代表作:双截棍,东风破,千里之外,简单爱,爱在西元前,半岛铁盒,夜曲……</p>
    </div>
   </li>
   <li class="con">
    <img src="files/class2.jpg" alt="test" />
    <div class="txt">
     <h3>刘德华</h3>
     <p>代表作:冰雨,今天,男人哭吧不是罪,谢谢你的爱,一起走过的日子,天意……</p>
    </div>
   </li>
   <li class="con">
    <img src="files/class3.jpg" alt="test" />
    <div class="txt">
     <h3>张学友</h3>
     <p>代表作:吻别,如果这都不算爱,一路上有你,一千个伤心的理由……</p>
    </div>
   </li>
   <li class="con">
    <img src="files/class4.jpg" alt="test" />
    <div class="txt">
     <h3>王力宏</h3>
     <p>代表作:大城小爱,唯一,依然爱你,你不知道的事,好心分手……</p>
    </div>
   </li>
   <li class="con">
    <img src="files/class5.jpg" alt="test" />
    <div class="txt">
     <h3>林俊杰</h3>
     <p>代表作:冻结,江南,让我心动的人,星球,就是我,豆浆油条,子弹列车……</p>
    </div>
   </li>
   <li class="con">
    <img src="files/class6.jpg" alt="test" />
    <div class="txt">
     <h3>陈奕迅</h3>
     <p>十年,你的背包,明年今日,淘汰,K歌之王,浮夸,好久不见,人来人往……</p>
    </div>
   </li>
  </ul>
 </div>

本示例网页效果如下:

鼠标指向出现文字.jpg

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/130.html