24H免费课程咨询  TEL:13401595960   QQ:1870218756  微信:13401595960(李老师)

东方博宜

网站首页 > 软件开发资讯 > PHP开发

【常州PHP培训】JQuery实现鼠标移入显示遮罩特效

2017-12-03 16:56:55 东方博宜 阅读

鼠标移入图片,显示图片遮罩效果

例子:

                   <style>

                   .main{

                            width:242px;height:390px;overflow: hidden;position: relative;cursor:pointer;

                   }

 

                   .main span{

                            width:100%;height:80px;display: block;text-align: center;line-height: 80px;

                            color:#FFF;position: absolute;bottom:-80px;left:0px;background-color:#222;opacity: 0.6;

                   }

 

                   </style>

                   <div class="main">

                            <img src="imgs/01.jpg"/>

                            <span>图片描述文字</span>

                   </div>

 

 

        

                   <script src="js/jquery-1.11.3.js"></script>

                   <script>

                      $(document).ready(function(){

                         $(".main").hover(

                            function(){

                                $(this).find("span").stop().animate({bottom:"0px"},500); 

                                 }

                                 ,

                                 function(){

                                        var h = $(this).find("span").height();

                                        $(this).find("span").stop().animate({bottom:-1 * h},500);

                                 }

                         );

                      });

                   </script>

图片.png

Powered by 东方博宜教育咨询江苏有限公司  ©2008-2017 www.czos.cn