jquery折纸变换效果特效代码

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

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

以下是 jquery折纸变换效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>jquery折纸变换效果</title>
<link href="css/reset.css" rel="stylesheet" media="screen" />
<link href="css/main.css" rel="stylesheet" media="screen" />
</head>
<body>
<script src="js/header.js"></script>
<script src="js/origami.js"></script>
<script type="text/javascript" src="js/plusone.js"></script>
<div style="text-align:center;clear:both"><font size="4"><br><br><br><br><br><br><br><br><br><br>
</font>
</div>
</body>
</html>

JS代码(header.js):

/** * Controls the showing and hiding of the expandable * header. * * @author Hakim El Hattab / http://hakim.se */
window.onload = function(){
	var header = document.getElementsByTagName('header')[0];
	var headerToggleTimeOut = -1;
	var headerMouseDown = false;
	document.addEventListener( 'mousedown',function(){
	headerMouseDown = true;
}
,false );
	document.addEventListener( 'mouseup',function(){
	headerMouseDown = false;
}
,false );
	header.addEventListener('mouseover',function(){
	if (!headerMouseDown){
	// Make sure no previous call to toggle the header are// queued upclearTimeout( headerToggleTimeOut );
	// Avoid accidentally opening the header by setting// a short time outheaderToggleTimeOut = setTimeout( function(){
	header.setAttribute( 'class','open' )}
,100 );
}
}
,false);
	header.addEventListener('mouseout',function(){
	// Make sure no previous call to toggle the header are// queued upclearTimeout( headerToggleTimeOut );
	// Avoid accidentally closing the header by setting// a short time outheaderToggleTimeOut = setTimeout( function(){
	header.setAttribute( 'class','' )}
,100 );
}
,false);
}
;

JS代码(plusone.js):

var gapi=window.gapi=window.gapi||{
}
;
	gapi._bs=new Date().getTime();
	(function(){
	var e=null,f=window,g="push",k="replace",m="length";
	var n=f,s=document,w=n.location,A=function(){
}
,B=/\[native code\]/,C=function(a,b,c){
	return a[b]=a[b]||c}
,E=function(a){
	for(var b=0;
	b<this[m];
	b++)if(this[b]===a)return b;
	return-1}
,F=function(a){
	a=a.sort();
	for(var b=[],c=void 0,d=0;
	d<a[m];
	d++){
	var h=a[d];
	h!=c&&b[g](h);
	c=h}
return b}
,G=function(){
	var a;
	if((a=Object.create)&&B.test(a))a=a(e);
	else{
	a={
}
;
	for(var b in a)a[b]=void 0}
return a}
,H=C(n,"gapi",{
}
);
	var I;
	I=C(n,"___jsl",G());
	C(I,"I",0);
	C(I,"hel",10);
	var J=function(){
	var a=w.href,b;
	if(I.dpo)b=I.h;
	else{
	b=I.h;
	var c=RegExp("([#].*&|[#])jsh=([^&#]*)","g"),d=RegExp("([?#].*&|[?#])jsh=([^&#]*)","g");
	if(a=a&&(c.exec(a)||d.exec(a)))try{
	b=decodeURIComponent(a[2])}
catch(h){
}
}
return b}
,K=function(a){
	return C(C(I,"H",G()),a,G())}
;
	var M=C(I,"perf",G()),N=C(M,"g",G()),aa=C(M,"i",G());
	C(M,"r",[]);
	G();
	G();
	var O=function(a,b,c){
	var d=M.r;
	"function"===typeof d?d(a,b,c):d[g]([a,b,c])}
,Q=function(a,b,c){
	b&&0<b[m]&&(b=P(b),c&&0<c[m]&&(b+="___"+P(c)),28<b[m]&&(b=b.substr(0,28)+(b[m]-28)),c=b,b=C(aa,"_p",G()),C(b,c,G())[a]=(new Date).getTime(),O(a,"_p",c))}
,P=function(a){
	return a.join("__")[k](/\./g,"_")[k](/\-/g,"_")[k](/\,/g,"_")}
;
	var R=G(),S=[],T;
	T={
	a:"callback",e:"sync",c:"config",g:"_c",f:"h",l:"platform",i:"jsl",TIMEOUT:"timeout",d:"ontimeout",k:"mh",j:"u"}
;
	S[g]([T.i,function(a){
	for(var b in a)if(Object.prototype.hasOwnProperty.call(a,b)){
	var c=a[b];
	"object"==typeof c?I[b]=C(I,b,[]).concat(c):C(I,b,c)}
if(b=a[T.j])a=C(I,"us",[]),a[g](b),(b=/^https:(.*)$/.exec(b))&&a[g]("http:"+b[1])}
]);
	var U=decodeURI("%73cript");
	R.m=function(a){
	var b=I.ms||"https://apis.google.com";
	a=a[0];
	var c;
	if(!(c=!a))c=0<=a.indexOf("..");
	if(c)throw"Bad hint";
	return b+"/"+a[k](/^\//,"")}
;
	var V=function(a){
	return a.join(",")[k](/\./g,"_")[k](/-/g,"_")}
,W=function(a,b){
	for(var c=[],d=0;
	d<a[m];
	++d){
	var h=a[d];
	h&&0>E.call(b,h)&&c[g](h)}
return c}
,ba=function(){
	var a=J();
	if(!a)throw"Bad hint";
	return a}
,ca=function(a){
	var b=a.split(";
	"),c=R[b.shift()],b=c&&c(b);
	if(!b)throw"Bad hint:"+a;
	return b}
,da=/^[\/_a-zA-Z0-9,.\-!:=]+$/,ea=/^https?:\/\/[^\/\?#]+\.google\.com(:\d+)?\/[^\?#]+$/,fa=/\/cb=/g,ga=/\/\//g,ha=function(a){
	var b=a.match(ga),c=a.match(fa);
	return!!c&&1===c[m]&&ea.test(a)&&da.test(a)&&!!b&&1===b[m]}
,ia=function(a){
	"loading"!=s.readyState?X(a):s.write("<"+U+' src="'+encodeURI(a)+'"></'+U+">")}
,X=function(a){
	var b=s.createElement(U);
	b.setAttribute("src",a);
	b.async="true";
	(a=s.getElementsByTagName(U)[0])?a.parentNode.insertBefore(b,a):(s.head||s.body||s.documentElement).appendChild(b)}
,ja=function(a,b){
	var c=b&&b[T.g];
	if(c)for(var d=0;
	d<S[m];
	d++){
	var h=S[d][0],l=S[d][1];
	l&&Object.prototype.hasOwnProperty.call(c,h)&&l(c[h],a,b)}
}
,ka=function(a,b){
	Y(function(){
	var c;
	c=b===J()?C(H,"_",G()):G();
	c=C(K(b),"_",c);
	a(c)}
)}
,$=function(a,b){
	var c=b||{
}
;
	"function"==typeof b&&(c={
}
,c[T.a]=b);
	ja(a,c);
	var d=a?a.split(":"):[],h=c[T.f]||ba(),l=C(I,"ah",G());
	if(!l["::"]||!d[m])Z(d||[],c,h);
	else{
	for(var p=[],x=e;
	x=d.shift();
	){
	var t=x.split("."),t=l[x]||l[t[1]&&"ns:"+t[0]||""]||h,q=p[m]&&p[p[m]-1]||e,y=q;
	if(!q||q.hint!=t)y={
	hint:t,b:[]}
,p[g](y);
	y.b[g](x)}
var z=p[m];
	if(1<z){
	var D=c[T.a];
	D&&(c[T.a]=function(){
	0==--z&&D()}
)}
for(;
	d=p.shift();
	)Z(d.b,c,d.hint)}
}
,Z=function(a,b,c){
	a=F(a)||[];
	var d=b[T.a],h=b[T.c],l=b[T.TIMEOUT],p=b[T.d],x=e,t=!1;
	if(l&&!p||!l&&p)throw"Timeout requires both the timeout parameter and ontimeout parameter to be set";
	var q=C(K(c),"r",[]).sort(),y=C(K(c),"L",[]).sort(),z=[].concat(q),D=function(a,b){
	if(t)return 0;
	n.clearTimeout(x);
	y[g].apply(y,r);
	var l=((H||{
}
).config||{
}
).update;
	l?l(h):h&&C(I,"cu",[])[g](h);
	if(b){
	Q("me0",a,z);
	try{
	ka(b,c)}
finally{
	Q("me1",a,z)}
}
d&&d();
	return 1}
;
	0<l&&(x=n.setTimeout(function(){
	t=!0;
	p()}
,l));
	var r=W(a,y);
	if(r[m]){
	var r=W(a,q),u=C(I,"CP",[]),v=u[m];
	u[v]=function(a){
	if(!a)return 0;
	Q("ml1",r,z);
	var b=function(){
	u[v]=e;
	return D(r,a)}
;
	if(0<v&&u[v-1])u[v]=b;
	else for(b();
	(b=u[++v])&&b();
	);
}
;
	if(r[m]){
	var L="loaded_"+I.I++;
	H[L]=function(a){
	u[v](a);
	H[L]=e}
;
	a=ca(c);
	a=a[k]("__features__",V(r))[k](/\/$/,"")+(q[m]?"/ed=1/exm="+V(q):"")+("/cb=gapi."+L);
	if(!ha(a))throw"Bad URL "+a;
	q[g].apply(q,r);
	Q("ml0",r,z);
	b[T.e]||n.___gapisync?ia(a):X(a)}
else u[v](A)}
else D(r)}
;
	var Y=function(a){
	if(I.hee&&0<I.hel)try{
	return a()}
catch(b){
	I.hel--,$("debug_error",function(){
	f.___jsl.hefn(b)}
)}
else return a()}
;
	H.load=function(a,b){
	return Y(function(){
	return $(a,b)}
)}
;
	N.bs0=f.gapi._bs||(new Date).getTime();
	O("bs0");
	N.bs1=(new Date).getTime();
	O("bs1");
	delete f.gapi._bs;
}
)();
	gapi.load("plusone-unsupported",{
	callback:window["gapi_onload"],_c:{
	"jsl":{
	"ci":{
	"services":{
}
,"deviceType":"desktop","lexps":[102,100,71,98,96,79,74,104,45,17,86,82,92,94,61,30,90],"inline":{
	"css":1}
,"report":{
}
,"oauth-flow":{
	"authUrl":"https://accounts.google.com/o/oauth2/auth","proxyUrl":"https://accounts.google.com/o/oauth2/postmessageRelay"}
,"isPlusUser":false,"iframes":{
	"additnow":{
	"methods":["launchurl"],"url":"https://apis.google.com/additnow/additnow.html?bsv"}
,"plus":{
	"methods":["onauth"],"url":":socialhost:/u/:session_index:/_/pages/badge?bsv"}
,":socialhost:":"https://plusone.google.com","plus_followers":{
	"params":{
	"url":""}
,"url":":socialhost:/_/im/_/widget/render/plus/followers?bsv"}
,"recobox":{
	"params":{
	"url":""}
,"url":":socialhost:/:session_prefix:_/widget/render/recobox?bsv"}
,"autocomplete":{
	"params":{
	"url":""}
,"url":":socialhost:/:session_prefix:_/widget/render/autocomplete?bsv"}
,"plus_share":{
	"params":{
	"url":""}
,"url":":socialhost:/:session_prefix:_/+1/sharebutton?plusShare\u003dtrue\u0026bsv"}
,"savetowallet":{
	"url":"https://clients5.google.com/s2w/o/savetowallet?bsv"}
,"plus_circle":{
	"params":{
	"url":""}
,"url":":socialhost:/:session_prefix:_/widget/plus/circle?bsv"}
,"hangout":{
	"url":"https://talkgadget.google.com/widget/go?bsv"}
,"savetodrive":{
	"methods":["save"],"url":"https://drive.google.com/savetodrivebutton?bsv"}
,"card":{
	"url":":socialhost:/:session_prefix:_/hovercard/card?bsv"}
,"evwidget":{
	"params":{
	"url":""}
,"url":":socialhost:/:session_prefix:_/events/widget?bsv"}
,":signuphost:":"https://plus.google.com","plusone":{
	"preloadUrl":["https://ssl.gstatic.com/s2/oz/images/stars/po/Publisher/sprite4-a67f741843ffc4220554c34bd01bb0bb.png"],"params":{
	"count":"","size":"","url":""}
,"url":":socialhost:/:session_prefix:_/+1/fastbutton?bsv"}
}
,"debug":{
	"host":"https://plusone.google.com","reportExceptionRate":0.05,"rethrowException":true}
,"csi":{
	"rate":0.0}
,"googleapis.config":{
	"mobilesignupurl":"https://m.google.com/app/plus/oob?"}
}
,"h":"m;
	/_/scs/apps-static/_/js/k\u003doz.gapi.zh_CN.UbRSiX1eyWc.O/m\u003d__features__/am\u003dQQ/rt\u003dj/d\u003d1/rs\u003dAItRSTO112_MiQ0YVUyjXn_fsytWM9KFRQ","u":"https://apis.google.com/js/plusone.js","hee":true,"fp":"7bbb888ea250c90ec7d200a2c44426c5ddb44756","dpo":false}
,"fp":"7bbb888ea250c90ec7d200a2c44426c5ddb44756","annotation":["autocomplete","profile"],"bimodal":[]}
}
);

CSS代码(main.css):

/********************************************* * GLOBAL *********************************************/
body,html{overflow:hidden;font-family:Helvetica,Arial,sans-serif;color:#fff;font-size:11px;background:#010c12;}
/********************************************* * HEADER *********************************************/
header{position:relative;width:100%;height:27px;margin:0;padding:0 8px 8px 8px;overflow:hidden;z-index:5;background:rgba( 60,60,60,0.5 );color:#eee;-webkit-transition:height .22s ease-out;-moz-transition:height .22s ease-out;-o-transition:height .22s ease-out;transition:height .22s ease-out;}
header.open{height:165px;}
header h1{font-family:Molengo,Helvetica,Arial,sans-serif;float:left;margin-top:1px;}
header .header-instruction{float:left;margin:12px 0 0 15px;font-size:10px;font-style:italic;color:#999;-webkit-transition:opacity .18s linear;-moz-transition:opacity .18s linear;-o-transition:opacity .18s linear;transition:opacity .18s linear;}
header.open .header-instruction{opacity:0;}
header div.extra{margin:45px 0 0 20px;clear:both;-webkit-transition:opacity .18s linear;-moz-transition:opacity .18s linear;-o-transition:opacity .18s linear;transition:opacity .18s linear;}
header div.extra h3{margin-bottom:10px;}
header a{padding:2px 4px 2px 2px;color:#999;-webkit-transition:all .1s ease-out;-moz-transition:all .1s ease-out;-o-transition:all .1s ease-out;transition:all .1s ease-in;}
header a:hover{padding:2px 4px 2px 2px;color:#ddd;background-color:#333;border-radius:1px;}
header section{height:120px;padding:0 25px;float:left;border-left:1px #333 solid;}
header p{margin-bottom:5px;font-size:12px;letter-spacing:0.05em;}
#about{padding-left:0;border:none;}
#about p.credits{margin:15px 0 2px 0;font-style:italic;color:#666;font-size:11px;line-height:1.4em;}
#about a:hover{padding:2px 10px 2px 8px;}
#share iframe,#share div{display:inline-block;}
#retweet-button{margin-right:6px;}
a[href="http://www.w3counter.com"]{display:none!important;}
.no-canvas{color:#999999;font-size:24px;text-align:center;margin-top:150px;}
/********************************************* * EXPERIMENT STYLES *********************************************/
canvas{z-index:1;}
#background{border:none;z-index:0;}
.ui{font-family:Arial,Helvetica,sans-serif;font-size:10px;color:#999999;text-align:left;padding:8px;background-color:rgba(0,0,0,0.5);float:left;}
#status{width:884px;height:15px;padding:8px;display:none;position:absolute;z-index:2;}
#status span{color:#bbbbbb;font-weight:bold;margin-right:5px;}
#status .fps{float:right;}
#panels{width:100%;position:absolute;z-index:3;}
#message{padding:16px;margin-top:10px;width:225px;}
.ui h2{margin-bottom:20px;color:#eeeeee;}
.ui ul{margin:10px 0;}
.ui ul li{margin:0 0 2px 0;}
.ui a{outline:none;font-family:Arial,Helvetica,sans-serif;font-size:38px;text-decoration:none;color:#bbbbbb;padding:2px;display:block;transition:all .18s linear;-o-transition:all .18s linear;-moz-transition:all .18s linear;-webkit-transition:all .18s linear;}
.ui a:hover{color:#ffffff;background-color:#000000;transition:all .18s linear;-o-transition:all .18s linear;-moz-transition:all .18s linear;-webkit-transition:all .18s linear;}
.ui a.external{outline:none;font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:bold;text-decoration:none;color:#bbbbbb;display:inline;padding:0;}
.ui a.external:hover{color:#ffffff;}

CSS代码(reset.css):

html{color:#000;background:#222222;}
a{cursor:pointer;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
/* h1,h2,h3,h4,h5,h6{font-size:100%;}
*/
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
legend{color:#000;}
a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style:none;border:0px;}
/*input[type="Submit"]{cursor:pointer;}
*/
strong{font-weight:bold;}

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