Welcome, Old Sport!

创建幻灯片图片展示效果 CSS & jQuery

by ilikecss ON 2010/10/29 14144

在本教程中,我们将创建一个具有动画效果的图片库。图片将归类于一个相册,你点击哪个相册将会展示里面所有的图片,图片以缩略图形式展开,点击后放大。对于这个画廊,我们将使用 2D Transform plugin (2D变换插件) 进行动画轮换。
目前教程中边框都使用了CSS3的圆角效果,Loading效果都是Png图片,希望IE访客多多谅解,网站构架兼容IE,FF,Opera,Safari
Let’s get started!

Step1. 创建HTML

<div id="pp_gallery" class="pp_gallery">
    <div id="pp_loading" class="pp_loading"></div>
    <div id="pp_next" class="pp_next"></div>
    <div id="pp_prev" class="pp_prev"></div>
    <div id="pp_thumbContainer">
        <div class="album">
            <div class="content">
                <img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" />
                <span>LUFFY</span>
            </div>
            <div class="content">
                <img src="images/album1/thumbs/2.jpg" alt="images/album1/2.jpg" />
                <span>ZORO</span>
            </div>
            <div class="content">
                <img src="images/album1/thumbs/3.jpg" alt="images/album1/3.jpg" />
                <span>NAMI</span>
            </div>
            <div class="content">
                <img src="images/album1/thumbs/4.jpg" alt="images/album1/4.jpg" />
                <span>SANJI</span>
            </div>
            <div class="content">
                <img src="images/album1/thumbs/5.jpg" alt="images/album1/5.jpg" />
                <span>USOPP</span>
            </div>
            <div class="content">
                <img src="images/album1/thumbs/6.jpg" alt="images/album1/6.jpg" />
                <span>CHOPPER</span>
            </div>
            <div class="descr">ONE PIECE</div>
        </div>

        <div class="album">
            <div class="content">
                <img src="images/album2/thumbs/1.jpg" alt="images/album2/1.jpg" />
                <span>Butterfly Girl</span>
            </div>
            <div class="content">
                <img src="images/album2/thumbs/2.jpg" alt="images/album2/2.jpg" />
                <span>Maxima</span>
            </div>
            <div class="content">
                <img src="images/album2/thumbs/3.jpg" alt="images/album2/3.jpg" />
                <span>Takeda Shingen</span>
            </div>
            <div class="content">
                <img src="images/album2/thumbs/4.jpg" alt="images/album2/4.jpg" />
                <span>Girl With Flower</span>
            </div>
            <div class="content">
                <img src="images/album2/thumbs/5.jpg" alt="images/album2/5.jpg" />
                <span>Barcelona</span>
            </div>
            <div class="descr">PERSONAL</div>
        </div>
        <div id="pp_back" class="pp_back">Albums</div>
    </div>
</div>

Step2. 创建CSS

*{
margin: 0;
padding: 0;
}
body{
background: #222;
font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
font-size: 12px;
color: #fff;
overflow: hidden;
}
#pp_gallery {
width: 100%;
overflow: hidden;
}
.pp_loading{
display: none;
position: absolute;
top: 50%;
left: 50%;
margin: -35px 0px 0px -35px;
background: #fff url(../icons/loader.gif) no-repeat center center;
width: 70px;
height: 70px;
z-index: 999;
opacity: 0.7;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.pp_next, .pp_prev{
width: 32px;
height: 32px;
cursor: pointer;
top: 50%;
margin-top:-16px;
position: absolute;
text-align: center;
border: 1px solid #111;
color: #fff;
-moz-box-shadow: 0px 0px 3px #000;
-webkit-box-shadow: 0px 0px 3px #000;
box-shadow: 0px 0px 3px #000;
}
.pp_next {
right: -40px;
background: #333 url(../icons/next.gif) no-repeat center center;
position: fixed;
_position: absolute;
}
.pp_next:hover {
background: #333 url(../icons/next_o.gif) no-repeat center center;
}
.pp_prev {
left: -40px;
background: #333 url(../icons/prev.gif) no-repeat center center;
position: fixed;
_position: absolute;
}
.pp_prev:hover {
left: 40px;
background: #333 url(../icons/prev_o.gif) no-repeat center center;
position: absolute;
}
#pp_thumbContainer{
position: fixed;
_position: absolute;
bottom: 0px;
left: 0px;
height: 165px;
width: 100%;
overflow: hidden;
}
#pp_thumbContainer .album{
width: 200px;
height: 90px;
position: absolute;
}
.album .descr,
.pp_back{
position: absolute;
bottom: 0px;
left: -16px;
background: #222;
text-align: center;
border: 1px solid #333;
padding: 5px;
cursor: pointer;
width: 169px;
color: #fff;
cursor: pointer;
text-shadow: 0px 0px 1px #fff;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
.pp_back{
text-transform: uppercase;
bottom: 120px;
left: -100px;
width: 80px;
}
#pp_thumbContainer .content{
position: absolute;
top: 0px;
height: 155px;
cursor: pointer;
}
#pp_thumbContainer img{
border: 5px solid #fff;
-moz-box-shadow: 1px 1px 7px #000;
-webkit-box-shadow: 1px 1px 7px #000;
box-shadow: 1px 1px 7px #000;
}
#pp_thumbContainer .content span{
display:none;
}
.pp_preview{
position: absolute;
top: 150%;
left: 50%;
}
.pp_preview img{
position: absolute;
top: 0px;
left: 0px;
border: 10px solid #fff;
border-bottom: 45px solid #fff;
-moz-box-shadow: 1px 1px 7px #000;
-webkit-box-shadow: 1px 1px 7px #000;
box-shadow: 1px 1px 7px #000;
}
.pp_descr{
font-size: 20px;
width: 100%;
bottom: 10px;
left: 0px;
position: absolute;
text-align: center;
color: #00021c;
}

Step3. 插入jQuery和脚本包

脚本:

<script type="text/javascript">
	$(function() {
		var ie 			= false;
		if ($.browser.msie) {
			ie = true;
		}
		//current album/image displayed 当前相册/图像显示
		var enableshow  = true;
		var current		= -1;
		var album		= -1;
		//windows width 窗口宽度
		var w_width 	= $(window).width();
		//caching 缓存
		var $albums 	= $('#pp_thumbContainer div.album');
		var $loader		= $('#pp_loading');
		var $next		= $('#pp_next');
		var $prev		= $('#pp_prev');
		var $images		= $('#pp_thumbContainer div.content img');
		var $back		= $('#pp_back');

		//we wnat to spread the albums through the page equally
		//number of spaces to divide with:number of albums plus 1 用数字划分相册ID
		var nmb_albums	= $albums.length;
		var spaces 		= w_width/(nmb_albums 1);
		var cnt			= 0;
		//preload all the images (thumbs) 预载的图片
		var nmb_images	= $images.length;
		var loaded  	= 0;
		$images.each(function(i){
			var $image = $(this);
			$('<img />').load(function(){
				  loaded;
				if(loaded == nmb_images){
					//let's spread the albums equally on the bottom of the page 开始页面下面的专辑列表
					$albums.each(function(){
						var $this 	= $(this);
						  cnt;
						var left	= spaces*cnt - $this.width()/2;
						$this.css('left',left 'px');
						$this.stop().animate({'bottom':'0px'},500);
					}).unbind('click').bind('click',spreadPictures);
					//also rotate each picture of an album with a random number of degrees 随机图片旋转角度
					$images.each(function(){
						var $this 	= $(this);
						var r 		= Math.floor(Math.random()*41)-20;
						$this.transform({'rotate'	: r   'deg'});
					});
				}
			}).attr('src', $image.attr('src'));
		});

		function spreadPictures(){
			var $album 	= $(this);
			//track which album is opened 目标专辑
			album		= $album.index();
			//hide all the other albums 隐藏其他所有专辑
			$albums.not($album).stop().animate({'bottom':'-150px'},300);
			$album.unbind('click');
			//now move the current album to the left 移动到左边当前相册
			//and at the same time spread its images through 同时通过图像
			//the window, rotating them randomly. Also hide the description of the album 隐藏专辑介绍

			//store the current left for the reverse operation 存储当前操作
			$album.data('left',$album.css('left'))
				  .stop()
				  .animate({'left':'0px'},500).find('.descr').stop().animate({'bottom':'-30px'},200);
			var total_pic 	= $album.find('.content').length;
			var cnt			= 0;
			//each picture 每张图片
			$album.find('.content')
				  .each(function(){
				var $content = $(this);
				  cnt;
				//window width 窗口宽度
				var w_width 	= $(window).width();
				var spaces 		= w_width/(total_pic 1);
				var left		= (spaces*cnt) - (140/2);
				var r 			= Math.floor(Math.random()*41)-20;
				//var r = Math.floor(Math.random()*81)-40;
				$content.stop().animate({'left':left 'px'},500,function(){
					$(this).unbind('click')
						   .bind('click',showImage)
						   .unbind('mouseenter')
						   .bind('mouseenter',upImage)
						   .unbind('mouseleave')
						   .bind('mouseleave',downImage);
				}).find('img')
				  .stop()
				  .animate({'rotate': r 'deg'},300);
				$back.stop().animate({'left':'0px'},300);
			});
		}

		//back to albums 返回相册
		//the current album gets its innitial left position 获取当前相册左边位置
		//all the other albums slide up 其他所有相册滑动
		//the current image slides out 当前画像滑出
		$back.bind('click',function(){
			$back.stop().animate({'left':'-100px'},300);
			hideNavigation();
			//there's a picture being displayed 这里有一个图片被显示出来
			//lets slide the current one up 
			if(current != -1){
				hideCurrentPicture();
			}

			var $current_album = $('#pp_thumbContainer div.album:nth-child(' parseInt(album 1) ')');
			$current_album.stop()
						  .animate({'left':$current_album.data('left')},500)
						  .find('.descr')
						  .stop()
						  .animate({'bottom':'0px'},500);

			$current_album.unbind('click')
						  .bind('click',spreadPictures);

			$current_album.find('.content')
					  .each(function(){
						var $content = $(this);
						$content.unbind('mouseenter mouseleave click');
						$content.stop().animate({'left':'0px'},500);
						});

			$albums.not($current_album).stop().animate({'bottom':'0px'},500);
		});

		//displays an image (clicked thumb) in the center of the page 显示在页面当中的画像
		//if nav is passed, then displays the next / previous one of the current album 显示当前专辑的上一个/下一个
		function showImage(nav){
			if(!enableshow) return;
			enableshow = false;
			if(nav == 1){
				//reached the first one 到达第一个
				if(current==0){
					enableshow = true;
					return;
				}
				var $content 			= $('#pp_thumbContainer div.album:nth-child(' parseInt(album 1) ')')
										  .find('.content:nth-child(' parseInt(current) ')');
				//reached the last one 到最后一个
				if($content.length==0){
					enableshow = true;
					current-=2;
					return;
				}
			}
			else
				var $content 			= $(this);

			//show ajax loading image 展示 ajax 读取的图片
			$loader.show();

			//there's a picture being displayed
			//lets slide the current one up
			if(current != -1){
				hideCurrentPicture();
			}

			current 				= $content.index();
			var $thumb				= $content.find('img');
			var imgL_source 	 	= $thumb.attr('alt');
			var imgL_description 	= $thumb.next().html();
			//preload the large image to show 大图片显示
			$('<img style=""/>').load(function(){
				var $imgL 	= $(this);
				//resize the image based on the windows size 在窗口范围内调整图片大小
				resize($imgL);
				//create an element to include the large image and its description 创建一个元素,包括图片和说明
				var $preview = $('<div />',{
					'id'		: 'pp_preview',
					'className'	: 'pp_preview',
					'html'     	: '<div class="pp_descr"><span>' imgL_description '</span></div>',
					'style'		: 'visibility:hidden;'
				});
				$preview.prepend($imgL);
				$('#pp_gallery').prepend($preview);

				var largeW 				= $imgL.width() 20;
				var largeH 				= $imgL.height() 10 45;
				//change the properties of the wrapping div to fit the large image sizes 改变外层div大小使其自动适应尺寸
				$preview.css({
					'width'			:largeW 'px',
					'height'		:largeH 'px',
					'marginTop'		:-largeH/2-20 'px',
					'marginLeft'	:-largeW/2 'px',
					'visibility'	:'visible'
				});
				Cufon.replace('.pp_descr');
				//show navigation 显示导航
				showNavigation();

				//hide the ajax image loading 隐藏ajax图片载入
				$loader.hide();

				//slide up (also rotating) the large image
				var r 			= Math.floor(Math.random()*41)-20;
				if(ie)
					var param = {
						'top':'50%'
					};
				else
					var param = {
						'top':'50%',
						'rotate': r 'deg'
					};
				$preview.stop().animate(param,500,function(){
					enableshow = true;
				});
			}).error(function(){
				//error loading image. Maybe show a message : 'no preview available'? 图片加载错误 提示一条消息
			}).attr('src',imgL_source);
		}

		//click next image 点击下一张图片
		$next.bind('click',function(){
			current =2;
			showImage(1);
		});

		//click previous image 点击上一张图片
		$prev.bind('click',function(){
			showImage(1);
		});

		//slides up the current picture 滑出当前图片
		function hideCurrentPicture(){
			current = -1;
			var r 	= Math.floor(Math.random()*41)-20;
			if(ie)
				var param = {
					'top':'-150%'
				};
			else
				var param = {
					'top':'-150%',
					'rotate': r 'deg'
				};
			$('#pp_preview').stop()
							.animate(param,500,function(){
								$(this).remove();
							});
		}

		//shows the navigation buttons 显示导航按钮
		function showNavigation(){
			$next.stop().animate({'right':'0px'},100);
			$prev.stop().animate({'left':'0px'},100);
		}

		//hides the navigation buttons 隐藏导航按钮
		function hideNavigation(){
			$next.stop().animate({'right':'-40px'},300);
			$prev.stop().animate({'left':'-40px'},300);
		}

		//mouseenter event on each thumb 每个鼠标点击事件
		function upImage(){
			var $content 	= $(this);
			$content.stop().animate({
				'marginTop'		: '-70px'
			},400).find('img')
				  .stop()
				  .animate({'rotate': '0deg'},400);
		}

		//mouseleave event on each thumb 每个鼠标移开事件
		function downImage(){
			var $content 	= $(this);
			var r 			= Math.floor(Math.random()*41)-20;
			$content.stop().animate({
				'marginTop'		: '0px'
			},400).find('img').stop().animate({'rotate': r   'deg'},400);
		}

		//resize function based on windows size 基于窗口尺寸调节功能
		function resize($image){
			var widthMargin		= 50
			var heightMargin 	= 200;

			var windowH      = $(window).height()-heightMargin;
			var windowW      = $(window).width()-widthMargin;
			var theImage     = new Image();
			theImage.src     = $image.attr("src");
			var imgwidth     = theImage.width;
			var imgheight    = theImage.height;

			if((imgwidth > windowW)||(imgheight > windowH)){
				if(imgwidth > imgheight){
					var newwidth = windowW;
					var ratio = imgwidth / windowW;
					var newheight = imgheight / ratio;
					theImage.height = newheight;
					theImage.width= newwidth;
					if(newheight>windowH){
						var newnewheight = windowH;
						var newratio = newheight/windowH;
						var newnewwidth =newwidth/newratio;
						theImage.width = newnewwidth;
						theImage.height= newnewheight;
					}
				}
				else{
					var newheight = windowH;
					var ratio = imgheight / windowH;
					var newwidth = imgwidth / ratio;
					theImage.height = newheight;
					theImage.width= newwidth;
					if(newwidth>windowW){
						var newnewwidth = windowW;
						var newratio = newwidth/windowW;
						var newnewheight =newheight/newratio;
						theImage.height = newnewheight;
						theImage.width= newnewwidth;
					}
				}
			}
			$image.css({'width':theImage.width 'px','height':theImage.height 'px'});
		}
	});
</script>

脚本包:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/jquery.transform-0.8.0.min.js"></script>

如有任何问题请在下面给我留言:>

11条评论
  1. #1

    奇乐网说道:

    CSS的功能无比强大。

  2. #2

    360说道:

    太强悍了。学习中。。。

  3. #3

    香樟树说道:

    厉害!

  4. #4

    seotons说道:

    Likeable spitting image, Most luxurious job :) I pleasure it. Sorry for my bad english, I’m from Japan.

  5. #5

    CNA Training说道:

    Do you people have a facebook fan page? I looked for one on twitter but could not discover one, I would really like to become a fan!

  6. #6

    maria andros说道:

    Thanks for the post, keep posting stuff

  7. #7

    pharmacist说道:

    It’s really a nice and helpful piece of information. I’m glad that you shared this helpful info with us. Please keep us informed like this. Thanks for sharing.

  8. I think one of your advertisements caused my internet browser to resize, you might want to put that on your blacklist.

  9. #9

    Ansel说道:

    Nice post. I desire to republish it on my internet site, is it possible ?Sorry for my poor english.

  10. #10

    Nouel说道:

    a single much more terrific piece of work. I be capable of get advice explained so properly friend, and always looking for.




TOP