代码描述:jQuery鼠标滑过图片 弹出文字说明。jQuery鼠标滑过图片弹出文字说明代码实例
不少图片类型的网站或者图片相对较多的网站为了起到比较好的美观或者实用化效果,当鼠标滑过图片的时候,一般会弹出一定的文字说明,用语对图片等相关主题进行描述,弹出形式多种多样,本章节分享一段,当鼠标滑过图片能够实现图片上缩,出现文字说明的效果,代码实例如下:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> .holder{ overflow:hidden; width:320px; height:333px; float:left; position:relative; background-color:#000; margin-right:1px; } .holder .image{ position:absolute; left:-100px; } .holder span{ background-color:#333; font-size:27px; font-family:Arial, Helvetica, sans-serif; color:#dedede; font-weight:700; padding:4px; position:absolute; top:120px; left:4px; } .holder .text{ padding:20px; display:none; font-family:Arial, Helvetica, sans-serif; line-height:26px; position:absolute; top:180px; font-size:16px; color:#fff; width:340px; } .clear{clear: both;} .main{ width:1000px; height:333px; margin:0 auto; overflow:hidden; } .credit{ font-size:12px; margin-top:25px; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.holder').hover(function(){ $(this).removeClass('.notactive'); $('.notactive').stop().animate({'width':'290px'},400); $(this).find('img').stop().animate({'top':'-165px'},400); $(this).stop().animate({'width':'380px'},400); $(this).find('span').css({'background-color':'#000'}); $(this).find('.text').fadeIn(300); }, function(){ $('.notactive').stop().animate({'width':'320px'},400); $(this).addClass('.notactive'); $(this).find('.text').hide(); $(this).find('img').stop().animate({'top':'0px'},500); $(this).stop().animate({'width':'320px'},400); $(this).find('span').css({'background-color':'#333', 'color':'#dedede'}); }); }); </script> </head> <body> <div class="main"> <div class="holder notactive"> <img class="image" src="mytest/demo/cite.jpg" height=""/> <span>自然风光</span> <div class="text">爱护自然就是爱护我们自己</div> </div> <div class="clear"></div> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能