jQuery图片弹出翻转特效代码

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

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

以下是 jQuery图片弹出翻转特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jQuery图片弹出翻转特效代码</title>
<link href="css/expander.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<script src="js/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/expander.min.js"></script>
<script>
var index =0;
var timeout= setInterval(function(){
	if (index > 10){
		window.clearInterval(timeout)
	}
	$("article").eq(index).addClass("show");
	index++
},300);
function showFoo(){
	$("#fooId").trigger("expand");
}
$("#expandSettings").on("click", function(){
	if ($("ul.settings").hasClass("open")){
		$("ul.settings").removeClass("open");
	}else{
		$("ul.settings").addClass("open");
	}
});
</script>
</head>
<body>
<br>
<section class="main">
	<article>
		<div class="imgContainer">
			<h5>效果一</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"default"}'>
		</div>
		<div class="imgContainer">
			<h5>效果二</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"diamond"}'>
			
		</div>
		<div class="imgContainer">
			<h5>效果三</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"turn3d"}'>
		</div>
		<div class="imgContainer">
			<h5>效果四</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"flip3d"}'>
		</div>
		<div class="imgContainer">
			<h5>效果五</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"rotate"}'>
		</div>				
		<div class="imgContainer">
			<h5>效果六</h5>
			<img src="images/chinaz.jpg"	data-expander='{animation:"fade"}'>
		</div>
	</article>
</section>
</body>
</html>

JS代码(expander.min.js):

!function(){
	function a(){
	var a=this;
	this.init=function(){
	$(document).ready(function(){
	var b=$("<div class='expander-siv'></div>");
	a.siv=b,$("div.expander-siv").length||$("body").append(b),$("img[data-expander]").each(function(){
	var c=$(this);
	c.attr("src",c.attr("src")+"?"+(new Date).getTime()),c.load(function(){
	var b=$(this).attr("data-expander"),c=$("<div data-expanderContainer></div>");
	if(c.addClass("expander-container"),b=b.replace(/(['"])?([a-zA-Z0-9_]+)(['"])?:/g,'"$2":'),b=b?JSON.parse(b):{
}
,b.animation&&c.addClass(b.animation),b.theme||(b.theme="dark",c.addClass("theme"),c.addClass("dark"),$("div.expander-siv").addClass("dark"),$("div.expander-siv").addClass("theme")),b.speed||(b.speed="normal"),b.url){
	var d=$(this).clone();
	d.attr("src",b.url+"?"+(new Date).getTime()),c.append(d)}
else c.append($(this).clone());
	c.data("options",b),c.data("original",{
	parent:$(this),position:$(this).offset()}
),c.css({
	position:"absolute",width:$(this).outerWidth(),height:$(this).outerHeight(),top:$(this).offset().top,left:$(this).offset().left}
),$(this).data("container",c),c.addClass("anim-"+b.speed),$("body").append(c),$(this).on("click",function(){
	a.pop($(this).data("container"))}
),c.on("click",function(){
	a.unpop($(this))}
)}
),$(this).bind("expand",function(){
	a.pop($(this).data("container"))}
),$(this).bind("retract",function(){
	a.unpop($(this).data("container"))}
)}
),setInterval(function(){
	a.reLayout()}
,2e3)}
),$(window).resize(function(){
	a.reLayout()}
)}
,this.reLayout=function(){
	$("div[data-expanderContainer]").each(function(){
	if($(this).hasClass("open"))$(this).css({
	top:$(window).scrollTop()+"px",left:"0px",width:"100%",height:"100%"}
);
	else{
	var b=$(this).data("original");
	$(this).css({
	width:b.parent.outerWidth(),height:b.parent.outerHeight(),top:b.parent.offset().top,left:b.parent.offset().left}
)}
}
)}
,this.pop=function(b){
	a.siv.removeClass(),a.siv.addClass("expander-siv").addClass("theme").addClass(b.data("options").theme),a.siv.addClass("show"),b.addClass("open"),b.css({
	position:"absolute",top:$(window).scrollTop()+"px",left:"0px",width:"100%",height:"100%"}
)}
,this.unpop=function(b){
	a.siv.removeClass("show");
	var c=b.data("original").parent;
	b.css({
	position:"absolute",top:c.offset().top+"px",left:c.offset().left+"px",width:c.outerWidth()+"px",height:c.outerHeight()+"px"}
),b.removeClass("open")}
,this.init()}
var a=new a}
();

CSS代码(expander.css):

.boxSizing{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.expander-container.anim-fast{-webkit-transition:all 300ms ease;-moz-transition:all 300ms ease;-o-transition:all 300ms ease;-ms-transition:all 300ms ease;transition:all 300ms ease;}
.expander-container.anim-fast img{-webkit-transition:all 300ms ease;-moz-transition:all 300ms ease;-o-transition:all 300ms ease;-ms-transition:all 300ms ease;transition:all 300ms ease;}
.expander-container.anim-normal{-webkit-transition:all 700ms ease;-moz-transition:all 700ms ease;-o-transition:all 700ms ease;-ms-transition:all 700ms ease;transition:all 700ms ease;}
.expander-container.anim-normal img{-webkit-transition:all 700ms ease;-moz-transition:all 700ms ease;-o-transition:all 700ms ease;-ms-transition:all 700ms ease;transition:all 700ms ease;}
.expander-container.anim-slow{-webkit-transition:all 1000ms ease;-moz-transition:all 1000ms ease;-o-transition:all 1000ms ease;-ms-transition:all 1000ms ease;transition:all 1000ms ease;}
.expander-container.anim-slow img{-webkit-transition:all 1000ms ease;-moz-transition:all 1000ms ease;-o-transition:all 1000ms ease;-ms-transition:all 1000ms ease;transition:all 1000ms ease;}
.expander-container.open{visibility:visible;-webkit-opacity:1;-moz-opacity:1;opacity:1;z-index:999999;}
.expander-container:before,.expander-container{content:"";display:inline-block;height:100%;vertical-align:middle;}
.expander-siv.show{-webkit-transition:all 1000ms ease;-moz-transition:all 1000ms ease;-o-transition:all 1000ms ease;-ms-transition:all 1000ms ease;transition:all 1000ms ease;z-index:100;pointer-events:all;visibility:visible;-webkit-opacity:1;-moz-opacity:1;opacity:1;}
.expander-siv{-webkit-transition:all 1000ms ease;-moz-transition:all 1000ms ease;-o-transition:all 1000ms ease;-ms-transition:all 1000ms ease;transition:all 1000ms ease;z-index:-1;-webkit-opacity:0;-moz-opacity:0;opacity:0;visibility:hidden;pointer-events:none;width:100%;height:100%;position:fixed;top:0px;left:0px;}
.expander-container{-webkit-perspective:1000;-moz-perspective:1000;-ms-perspective:1000;perspective:1000;z-index:-1;text-align:center;visibility:hidden;}
.expander-container > div{width:100%;position:relative;overflow:hidden;display:inline-block;}
.expander-container img{width:auto;height:auto;max-width:95%;max-height:95%;position:relative;display:inline-block;vertical-align:middle;}
.expander-container article{width:100%;height:50px;min-width:500px;position:relative;display:inline-block;}
.expander-siv.theme.dark{background-color:rgba(0,0,0,0.79);}
.expander-container.theme.dark img{-webkit-box-shadow:0px 0px 10px #000000;-moz-box-shadow:0px 0px 10px #000000;box-shadow:0px 0px 10px #000000;}
.expander-siv.theme.light{background-color:rgba(255,255,255,0.79);}
.expander-container.flip3d img{-o-transform:rotateX(360deg);-webkit-transform:rotateX(360deg);-moz-transform:rotateX(360deg);-ms-transform:rotateX(360deg);transform:rotateX(360deg);}
.expander-container.open.flip3d img{-o-transform:rotateX(0deg);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);-ms-transform:rotateX(0deg);transform:rotateX(0deg);}
.expander-container.turn3d img{-o-transform:rotateY(360deg);-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);-ms-transform:rotateY(360deg);transform:rotateY(360deg);}
.expander-container.open.turn3d img{-o-transform:rotateY(0deg);-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);transform:rotateY(0deg);}
.expander-container.rotate img{-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}
.expander-container.open.rotate img{-o-transform:rotate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}
.expander-container.fade img{-webkit-opacity:0;-moz-opacity:0;opacity:0;}
.expander-container.open.fade img{-webkit-opacity:1;-moz-opacity:1;opacity:1;}
.expander-container.diamond img{-o-transform:rotateX(0deg) rotateY(0deg);-webkit-transform:rotateX(0deg) rotateY(0deg);-moz-transform:rotateX(0deg) rotateY(0deg);-ms-transform:rotateX(0deg) rotateY(0deg);transform:rotateX(0deg) rotateY(0deg);}
.expander-container.open.diamond img{-o-transform:rotateX(360deg) rotateY(-360deg);-webkit-transform:rotateX(360deg) rotateY(-360deg);-moz-transform:rotateX(360deg) rotateY(-360deg);-ms-transform:rotateX(360deg) rotateY(-360deg);transform:rotateX(360deg) rotateY(-360deg);}

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