jQuery+CSS3图片翻转切换代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3图片翻转切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS3图片翻转切换代码 </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<!--必要样式-->
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>

<div class="cd-gallery-container">

	<nav class="cd-filter">
		<ul>
			<li class="placeholder"><a data-type="red" href="#0">Red</a></li> 
			<li><a class="selected" data-type="red" href="#0">Red</a></li>
			<li><a data-type="blue" href="#0">Blue</a></li>
			<li><a data-type="green" href="#0">Green</a></li>
		</ul>
	</nav>

	<ul class="cd-gallery cd-container">
		<li>
			<ul class="cd-item-wrapper">
				<li data-type="red" class="is-visible"><img src="images/thumb-red.jpg" alt="thumbnail"></li>
				<li data-type="blue" class="is-hidden"><img src="images/thumb-blue.jpg" alt="thumbnail"></li>
				<li data-type="green" class="is-hidden"><img src="images/thumb-green.jpg" alt="thumbnail"></li>
			</ul>
		</li>
		<li>
			<ul class="cd-item-wrapper">
				<li data-type="red" class="is-visible"><img src="images/thumb-red.jpg" alt="thumbnail"></li>
				<li data-type="blue" class="is-hidden"><img src="images/thumb-blue.jpg" alt="thumbnail"></li>
				<li data-type="green" class="is-hidden"><img src="images/thumb-green.jpg" alt="thumbnail"></li>
			</ul>
		</li>
		<li>
			<ul class="cd-item-wrapper">
				<li data-type="red" class="is-visible"><img src="images/thumb-red.jpg" alt="thumbnail"></li>
				<li data-type="blue" class="is-hidden"><img src="images/thumb-blue.jpg" alt="thumbnail"></li>
				<li data-type="green" class="is-hidden"><img src="images/thumb-green.jpg" alt="thumbnail"></li>
			</ul>
		</li>
		<li>
			<ul class="cd-item-wrapper">
				<li data-type="red" class="is-visible"><img src="images/thumb-red.jpg" alt="thumbnail"></li>
				<li data-type="blue" class="is-hidden"><img src="images/thumb-blue.jpg" alt="thumbnail"></li>
				<li data-type="green" class="is-hidden"><img src="images/thumb-green.jpg" alt="thumbnail"></li>
			</ul>
		</li>
	</ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

JS代码(main.js):

jQuery(document).ready(function($){
	//wrap each one of your filter in a .cd-gallery-containerbouncy_filter($('.cd-gallery-container'));
	function bouncy_filter($container){
	$container.each(function(){
	var $this = $(this);
	var filter_list_container = $this.children('.cd-filter'),filter_values = filter_list_container.find('li:not(.placeholder) a'),filter_list_placeholder = filter_list_container.find('.placeholder a'),filter_list_placeholder_text = filter_list_placeholder.text(),filter_list_placeholder_default_value = 'Select',gallery_item_wrapper = $this.children('.cd-gallery').find('.cd-item-wrapper');
	//store gallery itemsvar gallery_elements ={
}
;
	filter_values.each(function(){
	var filter_type = $(this).data('type');
	gallery_elements[filter_type] = gallery_item_wrapper.find('li[data-type="'+filter_type+'"]');
}
);
	//detect click eventfilter_list_container.on('click',function(event){
	event.preventDefault();
	//detect which filter item was selectedvar selected_filter = $(event.target).data('type');
	//check if user has clicked the placeholder item (for mobile version)if( $(event.target).is(filter_list_placeholder) || $(event.target).is(filter_list_container) ){
	(filter_list_placeholder_default_value == filter_list_placeholder.text()) ? filter_list_placeholder.text(filter_list_placeholder_text):filter_list_placeholder.text(filter_list_placeholder_default_value);
	filter_list_container.toggleClass('is-open');
	//check if user has clicked a filter already selected}
else if( filter_list_placeholder.data('type') == selected_filter ){
	filter_list_placeholder.text($(event.target).text());
	filter_list_container.removeClass('is-open');
}
else{
	//close the dropdown (mobile version) and change placeholder text/data-type valuefilter_list_container.removeClass('is-open');
	filter_list_placeholder.text($(event.target).text()).data('type',selected_filter);
	filter_list_placeholder_text = $(event.target).text();
	//add class selected to the selected filter itemfilter_values.removeClass('selected');
	$(event.target).addClass('selected');
	//give higher z-index to the gallery items selected by the filtershow_selected_items(gallery_elements[selected_filter]);
	//rotate each item-wrapper of the gallery//at the end of the animation hide the not-selected items in the gallery amd rotate back the item-wrappers// fallback added for IE9var is_explorer_9 = navigator.userAgent.indexOf('MSIE 9') > -1;
	if( is_explorer_9 ){
	hide_not_selected_items(gallery_elements,selected_filter);
	gallery_item_wrapper.removeClass('is-switched');
}
else{
	gallery_item_wrapper.addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend',function(){
	hide_not_selected_items(gallery_elements,selected_filter);
	gallery_item_wrapper.removeClass('is-switched');
}
);
}
}
}
);
}
);
}
}
);
	function show_selected_items(selected_elements){
	selected_elements.addClass('is-selected');
}
function hide_not_selected_items(gallery_containers,filter){
	$.each(gallery_containers,function(key,value){
	if ( key != filter ){
	$(this).removeClass('is-visible is-selected').addClass('is-hidden');
}
else{
	$(this).addClass('is-visible').removeClass('is-hidden is-selected');
}
}
);
}

CSS代码(reset.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

CSS代码(style.css):

html *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{font-size:100%;font-family:"Ubuntu",sans-serif;color:#333;background-color:#ebe9d7;}
a{color:#383838;text-decoration:none;}
img{max-width:100%;}
/* --------------------------------Modules - reusable parts of our design-------------------------------- */
.cd-container{width:90%;max-width:1200px;margin:0 auto;}
.cd-container::after{/* clearfix */
 content:'';display:table;clear:both;}
/* --------------------------------Main components-------------------------------- */
.cd-gallery-container{margin:2em auto;}
@media only screen and (min-width:1200px){.cd-gallery-container{margin:4em auto;}
}
.cd-filter{position:relative;height:40px;width:150px;margin:0 auto;cursor:pointer;z-index:10;}
.cd-filter::after{/* small arrow icon */
 content:'';position:absolute;right:14px;top:50%;bottom:auto;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%);display:inline-block;width:16px;height:16px;background:url("../img/icon-small-arrow.svg") no-repeat center center;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s;pointer-events:none;}
.cd-filter ul{position:absolute;top:0;left:0;background:#FFF;border-radius:0.25em;box-shadow:0 1px 2px rgba(0,0,0,0.1);}
.cd-filter li{display:none;}
.cd-filter li:first-child{display:block;/* this way the placehodler is alway visible */
}
.cd-filter li:last-child a{border-radius:0 0 .25em .25em;}
.cd-filter a{display:block;height:40px;width:150px;line-height:40px;padding-left:14px;font-size:14px;font-size:0.875rem;font-weight:700;text-transform:uppercase;}
.cd-filter a.selected{background:#1a7179;color:#FFF;}
.no-touch .cd-filter a.selected:hover{background:#1f858e;}
.cd-filter.is-open::after{-webkit-transform:translateY(-50%) rotate(-180deg);-moz-transform:translateY(-50%) rotate(-180deg);-ms-transform:translateY(-50%) rotate(-180deg);-o-transform:translateY(-50%) rotate(-180deg);transform:translateY(-50%) rotate(-180deg);/* small arrow rotation */
}
.cd-filter.is-open ul li{display:block;}
.cd-filter.is-open .placeholder a{opacity:.4;/* reduces the opacity of the placeholder on mobile when the menu is open */
}
@media only screen and (min-width:768px){.cd-filter{height:auto;width:auto;}
.cd-filter::after{display:none;}
.cd-filter ul{background:transparent;position:static;box-shadow:none;text-align:center;}
.cd-filter li{display:inline-block;margin:0 .4em;}
.cd-filter li:first-child{display:inline-block;}
.cd-filter li.placeholder{display:none !important;}
.cd-filter li.placeholder a{display:none;}
.cd-filter a{display:inline-block;padding:1em 2em;height:auto;width:auto;line-height:1;border-radius:50em !important;}
.no-touch .cd-filter a:hover{box-shadow:inset 0 0 0 2px rgba(56,56,56,0.2);}
.cd-filter a.selected:hover{box-shadow:none;/* removes the hover effect from the selected item */
}
.cd-filter.is-open ul li{display:inline-block;}
}
/* --------------------------------xgallery-------------------------------- */
.cd-gallery{margin-top:2em;position:relative;z-index:5;}
.cd-gallery > li{position:relative;margin-bottom:1em;}
.cd-gallery .cd-item-wrapper{/* this is the item that rotates */
 position:relative;}
.touch .cd-gallery .cd-item-wrapper{/* fix a bug on IOS8 - rotating elements dissapear*/
 -webkit-perspective:800px;-moz-perspective:800px;perspective:800px;}
.cd-gallery .cd-item-wrapper.is-switched .is-visible{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);-webkit-animation:cd-rotate 0.5s;-moz-animation:cd-rotate 0.5s;animation:cd-rotate 0.5s;}
.cd-gallery .cd-item-wrapper.is-switched .is-hidden{-webkit-transform:rotateY(0);-moz-transform:rotateY(0);-ms-transform:rotateY(0);-o-transform:rotateY(0);transform:rotateY(0);-webkit-animation:cd-rotate-inverse 0.5s;-moz-animation:cd-rotate-inverse 0.5s;animation:cd-rotate-inverse 0.5s;opacity:0;}
.cd-gallery .cd-item-wrapper.is-switched .is-selected{opacity:1;}
.cd-gallery .cd-item-wrapper > li{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:0.25em;box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.cd-gallery .cd-item-wrapper > li img{display:block;width:100%;border-radius:0.25em;}
.cd-gallery li.is-visible{/* the front item,visible by default */
 position:relative;z-index:5;}
.cd-gallery li.is-hidden{/* the hidden items,right behind the front one */
 position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);}
.cd-gallery li.is-selected{/* the next item that will be visible */
 z-index:3 !important;}
@media only screen and (min-width:480px){.cd-gallery > li{width:48%;float:left;margin-right:4%;margin-bottom:1.2em;}
.cd-gallery > li:nth-of-type(2n){margin-right:0;}
}
@media only screen and (min-width:768px){.cd-gallery > li{width:22%;float:left;}
.cd-gallery > li:nth-of-type(2n){margin-right:4%;}
.cd-gallery > li:nth-of-type(4n){margin-right:0;}
}
@media only screen and (min-width:1200px){.cd-gallery{margin-top:4em;}
}
/* --------------------------------xkeyframes-------------------------------- */
@-webkit-keyframes cd-rotate{0%{-webkit-transform:perspective(800px) rotateY(0);}
70%{-webkit-transform:perspective(800px) rotateY(200deg);/* this creates the bounce effect */
}
100%{-webkit-transform:perspective(800px) rotateY(180deg);}
}
@-moz-keyframes cd-rotate{0%{-moz-transform:perspective(800px) rotateY(0);}
70%{-moz-transform:perspective(800px) rotateY(200deg);/* this creates the bounce effect */
}
100%{-moz-transform:perspective(800px) rotateY(180deg);}
}
@keyframes cd-rotate{0%{-webkit-transform:perspective(800px) rotateY(0);-moz-transform:perspective(800px) rotateY(0);-ms-transform:perspective(800px) rotateY(0);-o-transform:perspective(800px) rotateY(0);transform:perspective(800px) rotateY(0);}
70%{-webkit-transform:perspective(800px) rotateY(200deg);-moz-transform:perspective(800px) rotateY(200deg);-ms-transform:perspective(800px) rotateY(200deg);-o-transform:perspective(800px) rotateY(200deg);transform:perspective(800px) rotateY(200deg);/* this creates the bounce effect */
}
100%{-webkit-transform:perspective(800px) rotateY(180deg);-moz-transform:perspective(800px) rotateY(180deg);-ms-transform:perspective(800px) rotateY(180deg);-o-transform:perspective(800px) rotateY(180deg);transform:perspective(800px) rotateY(180deg);}
}
@-webkit-keyframes cd-rotate-inverse{0%{-webkit-transform:perspective(800px) rotateY(-180deg);}
70%{-webkit-transform:perspective(800px) rotateY(20deg);/* this creates the bounce effect */
}
100%{-webkit-transform:perspective(800px) rotateY(0);}
}
@-moz-keyframes cd-rotate-inverse{0%{-moz-transform:perspective(800px) rotateY(-180deg);}
70%{-moz-transform:perspective(800px) rotateY(20deg);/* this creates the bounce effect */
}
100%{-moz-transform:perspective(800px) rotateY(0);}
}
@keyframes cd-rotate-inverse{0%{-webkit-transform:perspective(800px) rotateY(-180deg);-moz-transform:perspective(800px) rotateY(-180deg);-ms-transform:perspective(800px) rotateY(-180deg);-o-transform:perspective(800px) rotateY(-180deg);transform:perspective(800px) rotateY(-180deg);}
70%{-webkit-transform:perspective(800px) rotateY(20deg);-moz-transform:perspective(800px) rotateY(20deg);-ms-transform:perspective(800px) rotateY(20deg);-o-transform:perspective(800px) rotateY(20deg);transform:perspective(800px) rotateY(20deg);/* this creates the bounce effect */
}
100%{-webkit-transform:perspective(800px) rotateY(0);-moz-transform:perspective(800px) rotateY(0);-ms-transform:perspective(800px) rotateY(0);-o-transform:perspective(800px) rotateY(0);transform:perspective(800px) rotateY(0);}
}

附件:下载该文件资源,减少时间成本(增值服务)