可隐藏文字，支持缩略图的jQuery图片切换

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>可隐藏文字的图片切换效果</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(//ku.shouce.ren/files/images/201601/56a33cb65a80c.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(//ku.shouce.ren/files/images/201601/56a33cb710da1.gif) no-repeat left top;
    text-indent: -99999px;
    position: absolute;
    top: -27px;
    right: 20px;
}
.examples_image a.show {background-position: left bottom;}
.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="//apps.bdimg.com/libs/jquery/1.11.3/jquery.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="//ku.shouce.ren/files/images/201601/56a33cb7ccdfc.jpg" alt="" />
		<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="//ku.shouce.ren/files/images/201601/56a33cb7ccdfc.jpg"><img src="//ku.shouce.ren/files/images/201601/56a33ccf9f506.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="//ku.shouce.ren/files/images/201601/56a33cd082f1b.jpg"><img src="//ku.shouce.ren/files/images/201601/56a33cd1e1f66.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="//ku.shouce.ren/files/images/201601/56a33cd29d968.jpg"><img src="//ku.shouce.ren/files/images/201601/56a33cd5f17ec.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="//ku.shouce.ren/files/images/201601/56a33cd82fa5f.jpg"><img src="//ku.shouce.ren/files/images/201601/56a33cdc3b5e9.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

可隐藏文字，支持缩略图的jQuery图片切换

分类

图片代码

描述

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