jQuery带缩略图和文字的图片切换,文字可隐藏

发布时间：2018-08-21 03:16 所属栏目：121 来源：站长网

导读：jQuery 图片切换效果，可隐藏文字的图片切换效果，带有缩略图，说明文字是动画显示、动画隐藏，当鼠标放到内容上的时候它才会显示出来，平时是隐藏看不到的，这样图片充分被看到，增加美感，也更能吸引人的眼球。为解决一些网页特效运行后不能显示效果

　　jQuery图片切换效果，可隐藏文字的图片切换效果，带有缩略图，说明文字是动画显示、动画隐藏，当鼠标放到内容上的时候它才会显示出来，平时是隐藏看不到的，这样图片充分被看到，增加美感，也更能吸引人的眼球。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>可隐藏文字的图片切换效果 - 烈火学院 Liehuo.Net</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body { font-size: 12px; } .examples_bg { width: 750px; background-color: #F0F0F0; border: 1px solid #CCCCCC; padding: 10px; overflow: hidden; } .examples_image { width: 428px; height: 305px; float: left; background: #333; position: relative; overflow: hidden; color: #fff; } .examples_image h4 { font-size: 1.5em; font-weight: normal; margin: 0 0 10px; padding: 5px 10px 0 10px; } .examples_image h4.title02 { color: #feb403; } .examples_image h4.title03 { color: #f23962; } .examples_image h4.title04 { color: #43b6ff; } .examples_image p { line-height: 1.5em; padding: 10px 10px 0 10px; margin: 0; font-size: 0.9em; } .block small { font-size: 1em; padding: 0 0 0 20px; background: url(/uploads/allimg/1009/icon_calendar.gif) no-repeat 0 center; } .examples_image .block small { margin-left: 10px; } .examples_image .desc{ width: 100%; position: absolute; bottom: 0; left: 0; display: none; } /* ｌｉｅｈｕｏ．ｎｅｔ */ .examples_image .block{ width: 100%; background: #111; border-top: 1px solid #000; padding-bottom: 5px; } .examples_image a.collapse { width: 93px; height: 27px; background: url(/uploads/allimg/1009/btn_display.gif) no-repeat left top; text-indent: -99999px; position: absolute; top: -27px; right: 20px; } .examples_image a.show {background-position: left bottom;} .examples_image img {width:428px;height:305px;} .mune_thumb { float: left; width: 299px; background: #f0f0f0; border-right: 1px solid #fff; border-top: 1px solid #ccc; } .mune_thumb img { border: 1px solid #ccc; padding: 5px; background: #fff; float: left; } .mune_thumb ul { margin: 0; padding: 0; list-style: none; } .mune_thumb ul li{ width: 279px; color: #333; margin: 0; padding: 12px 10px; background-color: #EEE; float: left; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; border-right: 1px solid #ccc; } .mune_thumb ul li.hover { background: #CCC; cursor: pointer; } .mune_thumb ul li.active { background: #fff; cursor: default; } .mune_thumb ul li h4 { font-size: 1.4em; margin: 5px 0; padding: 0; } .mune_thumb ul li .block { float: left; margin-left: 10px; padding: 0; width: 200px; } .mune_thumb ul li p{display: none;} </style> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".examples_image .desc").show(); $(".examples_image .block").animate({ opacity: 0.85 }, 1 ); $(".mune_thumb ul li:first").addClass('active'); $(".mune_thumb ul li").click(function(){ var imgAlt = $(this).find('img').attr("alt"); var imgTitle = $(this).find('a').attr("href"); var imgDesc = $(this).find('.block').html(); var imgDescHeight = $(".examples_image").find('.block').height(); if ($(this).is(".active")) { return false; } else { $(".examples_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".examples_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); $(".examples_image img").attr({ src: imgTitle , alt: imgAlt}); }); } $(".mune_thumb ul li").removeClass('active'); $(this).addClass('active'); return false; }) .hover(function(){ $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); //Toggle $("a.collapse").click(function(){ $(".examples_image .block").slideToggle(); $("a.collapse").toggleClass("show"); }); });//Close Function </script> </head> <body> 预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br> <div class="examples_bg"> <div class="examples_image"> <img src="/uploads/common/images/p1.jpg" alt="" width="428" height="305" /> <div class="desc"> <a href="#" class="collapse">Close Me!</a> <div class="block"> <h4>Sunflowa Media</h4> <small>Aug.23</small> <p>Hey, I'm Airos Chou.<br />I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website, accessible websites that are easy to use and easy for our life.</p> </div> </div> </div> <div class="mune_thumb"> <ul> <li> <a href="/uploads/common/images/p1.jpg"><img width="60" height="48" src="/uploads/common/images/s_p1.jpg" alt="Sunflowa Media" /></a> <div class="block"> <h4>Sunflowa Media</h4> <small>Aug.23</small> <p>Hey, I'm Airos Chou.<br />I am a freelance web designer & graphic designer based in Shanghai, CN. I make Green Environment Protection website.</p> </div> </li> <li> <a href="/uploads/common/images/p2.jpg"><img width="60" height="48" src="/uploads/common/images/s_p2.jpg" alt="Meet my dragon" /></a> <div class="block"> <h4 class="title02">Meet my dragon</h4> <small>Aug.23</small> <p>Meet my dragon Meet my dragon Meet my dragon Meet my dragon Meet my dragon Meet my dragon Meet my dragon Meet my dragonMeet my dragon</p> </div> </li> <li> <a href="/uploads/common/images/p3.jpg"><img width="60" height="48" src="/uploads/common/images/s_p3.jpg" alt="Rui Ricardo" /></a> <div class="block"> <h4 class="title03">Rui Ricardo</h4> <small>Aug.23</small> <p>Rui Ricardo Rui Ricardo Rui Ricardo Rui Ricardo Rui Ricardo Rui Ricardo Rui Ricardo Rui Ricardo Rui Ricardo Rui Ricardo Rui Ricardo Rui Ricardo</p> </div> </li> <li> <a href="/uploads/common/images/p4.jpg"><img width="60" height="48" src="/uploads/common/images/s_p4.jpg" alt="American kick-ass" /></a> <div class="block"> <h4 class="title04">American kick-ass</h4> <small>Aug.23</small> <p>American kick-ass American kick-ass American kick-ass American kick-ass American kick-ass American kick-ass American kick-ass</p> </div> </li> </ul> </div> </div> </body> </html> <div style="display:none;"> <script type="text/javascript" src="/liehuo.net/js/stat.js"></script> </div><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）