Welcome, Old Sport!

创建一个图像切换菜单

by ilikecss ON 2010/08/23 3704

这款切换的菜单在许多领域被运用到,文字可以隐藏,也可以用来展示您的作品。
Image Switch Box

Step1. 创建HTML

<div class="examples_image">
    <img src="images/sample_banner1.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 &amp; 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="images/sample_banner1.jpg"><img src="images/sample_banner1_thumb.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 &amp; graphic designer based in Shanghai, CN. I make Green Environment Protection website.</p>
            </div>
        </li>
        <li>
            <a href="images/sample_banner2.jpg"><img src="images/sample_banner2_thumb.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="images/sample_banner3.jpg"><img src="images/sample_banner3_thumb.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="images/sample_banner4.jpg"><img src="images/sample_banner4_thumb.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>

Step2. 创建CSS

.examples_bg {
width: 728px;
background-color: #F0F0F0;
border: 1px solid #CCC;
padding: 10px;
overflow: hidden;
}
.examples_image {
width: 428px;
height: 305px;
float: left;
background: #333;
position: relative;
overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
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 { /*--We'll be using this same style on our thumbnail list--*/
font-size: 1em;
padding: 0 0 0 20px;
background: url(../images/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; /*--Stick the desc class to the bottom of our main image container--*/
display: none; /*--Hide description by default, if js is enabled, we will show this--*/
}
.examples_image .block{
width: 100%;
background: #111;
border-top: 1px solid #000;
padding-bottom: 5px;
}
.examples_image a.collapse { /*--This is our hide/show tab--*/
width: 93px;
height: 27px;
background: url(../images/btn_display.gif) no-repeat left top;
text-indent: -99999px;
position: absolute;
top: -27px;
right: 20px;
}
.examples_image a.show {background-position: left bottom;}
.mune_thumb {
width: 299px;
float: left;
background: #f0f0f0;
border-right: 1px solid #fff;
border-top: 1px solid #ccc;
overflow: hidden;
}
.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 { /*--Hover State--*/
background: #CCC;
cursor: pointer;
}
.mune_thumb ul li.active { /*--Active State--*/
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;} /*--Hide the description on the list items--*/

Step3. 插入jQuery和脚本包

$(document).ready(function() {
             //Show Banner
	$(".examples_image .desc").show(); //Show Banner
	$(".examples_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

	//Click and Hover events for thumbnail list
	$(".mune_thumb ul li:first").addClass('active');
	$(".mune_thumb ul li").click(function(){
		//Set Variables
		var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
		var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
		var imgDescHeight = $(".examples_image").find('.block').height();	//Calculate height of block	

		if ($(this).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			//Animate
			$(".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'); //Remove class of 'active' on all lists
		$(this).addClass('active');  //add class of 'active' on this list only
		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 type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
目前还没有评论



TOP