变化灵活的CSS网页框架特效代码

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

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

以下是变化灵活的CSS网页框架特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

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=gb2312" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为变化灵活的CSS网页框架，属于站长常用代码" />
<title>变化灵活的CSS网页框架</title>
<script type="text/javascript" src="js/dfFlexiGrid_inc.js"></script>
<script type="text/javascript" src="js/dfFlexiGrid.js"></script>
<link href="css/dfFlexiGrid.css" rel="stylesheet" type="text/css">
</head>
<body onload="mygrid=new dfGrid('wrapper','left_column','right_column');">
<div id="wrapper">  
        	<div id="header">
            	<a href="#" onclick="mygrid.toggleLeft();">Toggle Left</a>
                <a href="#" onclick="mygrid.toggleBlock('block1');">Left Accordion</a>
				<a href="#" onclick="mygrid.toggleRight();">Toggle Right</a>                
				<a href="#" onclick="mygrid.resize(700,'px');">800 PX</a>
				<a href="#" onclick="mygrid.resize(1000,'px');">1000 PX</a>
				<a href="#" onclick="mygrid.resize(100,'%');">100%</a>
				<a href="#" onclick="mygrid.resizeFont(0.05);">+ Font</a>
				<a href="#" onclick="mygrid.resizeFont(-0.05);">- Font</a>
            </div>
			<div id="left_column" >
				<div class="left_column">
					Appropriately seize pandemic channels and multidisciplinary imperatives.  Rapidiously promote tactical innovation rather than front-end strategic theme areas.
                    
                    <div class="blockdivider">
                        <a class="accord_toggle" href="#" onclick="mygrid.toggleBlock('block1');">TOGGLE(+/-)</a>
                        <div id="block1">
                            Appropriately seize pandemic channels and multidisciplinary imperatives. Rapidiously promote tactical innovation rather than front-end strategic                           
                        </div>
                    </div>
					
					Appropriately seize pandemic channels and multidisciplinary imperatives. Phosfluorescently expedite pandemic sources whereas performance based.</div>
			</div>
			<div id="right_column">
				<div class="right_column">
				  <p>Appropriately seize pandemic channels and multidisciplinary imperatives. Phosfluorescently expedite pandemic sources whereas performance based architectures. Rapidiously promote tactical innovation rather than front-end strategic theme areas.</p>
				  <p>Phosfluorescently communicate state of the art opportunities without extensible web-readiness. Monotonectally parallel task equity invested content vis-a-vis installed base platforms. Interactively disintermediate tactical products with effective models. </p>
				</div>
			</div>
			<div id="center_column">
				<div class="center_column">
                	<h2>Dezinerfolio.com</h2>
                    <p>This liquid grid based javascript is a free resource by <a href="http://dezinerfolio.com" target="_blank">Dezinerfolio</a></p>
				  <p>Appropriately seize pandemic channels and multidisciplinary imperatives. Phosfluorescently expedite pandemic sources whereas performance based architectures. Rapidiously promote tactical innovation rather than front-end strategic theme areas.</p>
				  <p>Phosfluorescently communicate state of the art opportunities without extensible web-readiness. Monotonectally parallel task equity invested content vis-a-vis installed base platforms. Interactively disintermediate tactical products with effective models. </p>
				  <p>Uniquely syndicate compelling internal or &quot;organic&quot; sources through parallel benefits. Assertively underwhelm effective synergy without backward-compatible information. Collaboratively communicate flexible manufactured products whereas scalable web services. </p>
				  <p>Conveniently develop enterprise-wide resources without compelling users. Synergistically implement B2B mindshare for effective systems. Credibly leverage existing business strategic theme areas through economically sound infomediaries. </p>
				  <p>Assertively empower dynamic infomediaries rather than superior metrics. Proactively generate standards compliant results for cost effective supply chains.</p>
				</div>
			</div>
</div>
</body>
</html>

JS代码(dfFlexiGrid.js):

/* dfGrid 1.0.0 (c) 2008 http://DezinerFolio.com* requires Prototype v1.4+,MooFx and MooFx.Utils*/
eval(function(p,a,c,k,e,r){
	e=function(c){
	return(c<62?'':e(parseInt(c/62)))+((c=c%62)<36?c.toString(36):String.fromCharCode(c+29))}
;
	if('0'.replace(0,e)==0){
	while(c--)r[e(c)]=k[c];
	k=[function(e){
	return r[e]||e}
];
	e=function(){
	return'\\w{
	1,2}
'}
;
	c=1}
;
	while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
	return p}
('k j=Class.P();
	k O={
	13:9(){
	6.E=[];
	k a=B.11.K(\';
	\');
	R(k i=0;
	i<a.1e;
	i++){
	k b=a[i].K(\'=\');
	6.E[b[0]]=b[1]}
}
,P:9(a,b,c){
	f(c){
	k d=n Date();
	d.setTime(d.getTime()+(c*86400000));
	k e=";
	expires="+d.toGMTString()}
H{
	k e=""}
B.11=a+"="+b+e+";
	path=/";
	6.E[a]=b}
,erase:9(a){
	6.P(a,\'\',-1);
	6.E[a]=undefined}
,1d:9(a){
	1c 6.E[a]}
}
;
	O.13();
	Object.extend(j.prototype,{
	initialize:9(a,b,c,d,e){
	6.8=6.M(a);
	6.z=6.M(b);
	6.C=6.M(c);
	6.S=(d)?d:16;
	6.D=(e)?e:16;
	6.8.q=n u.V(6.8.p,{
	t:6.D,F:9(){
	6.o.r=A;
	6.o.j.v()}
}
);
	6.y=n Array();
	6.Z()}
,v:9(){
	k a=[];
	R(i in 6.y){
	f(typeof 6.y[i]==\'number\'){
	a.1g(i);
	a.1g(6.y[i])}
}
k b=[6.z.g.w,6.C.g.w,6.8.q.to,6.8.q.Y.l,B.s.g.x,a.join(":")];
	O.P(\'1b\',b,7)}
,Z:9(){
	h=O.1d(\'1b\');
	f(h){
	h=h.K(\',\');
	f(h[0]==\'0\'){
	6.z.g.X=\'1a\';
	6.z.g.w=0}
f(h[1]==\'0\'){
	6.C.g.X=\'1a\';
	6.C.g.w=0}
8=parseInt(h[2]);
	f(!W(8)){
	l=h[3];
	f(l!=\'\'){
	8=(l==\'%\'&&8>N)?N:8;
	l=(8<=N)?\'%\':l;
	6.8.q.to=8;
	6.8.q.Y.l=l;
	6.8.g.X=8+l}
}
f(h[5]!=\'\'){
	L=h[5].K(":");
	R(i=0;
	i<L.1e;
	i+=2){
	f(L[i+1]=="0"){
	I=$(L[i]);
	6.y[I.p]=0;
	I.g.height=0;
	I.g.overflow=\'hidden\'}
}
}
x=18(h[4]);
	f(!W(x)){
	6.17(x,A)}
}
}
,M:9(a){
	a=$(a);
	a.r=A;
	a.j=6;
	a.g.w=1;
	a.15=a.J;
	1c a}
,T:9(a){
	f(a.r){
	f(a.g.w==1){
	a.14=n u.12(a.p,{
	t:a.j.S,F:9(){
	e=6.o;
	e.U=n u.V(e.p,{
	t:e.j.D,F:9(){
	6.o.r=A;
	6.o.j.v()}
}
);
	e.U.G(e.U.iniWidth,0)}
}
);
	a.14.G(1,0)}
H{
	a.10=n u.V(a.p,{
	t:a.j.D,F:9(){
	e=6.o;
	e.19=n u.12(e.p,{
	t:e.j.S,F:9(){
	6.o.r=A;
	6.o.j.v()}
}
);
	e.19.G(0,1)}
}
);
	a.10.G(0,a.15)}
}
}
,toggleLeft:9(){
	6.T(6.z)}
,toggleRight:9(){
	6.T(6.C)}
,resize:9(a,b){
	f(6.8.r){
	6.8.r=false;
	f(b){
	6.8.q.Y.l=b;
	f(b==\'%\'){
	m=6.8.J*N/B.s.J}
H{
	m=6.8.J}
}
6.8.q.G(m,a)}
}
,17:9(a,b){
	s=B.s;
	f(b){
	m=0}
H{
	m=18(s.g.x);
	m=W(m)?0.75:m}
s.g.x=m+a+\'em\';
	6.v()}
,toggleBlock:9(a){
	a=$(a);
	f(!a.Q){
	a.Q=n u.Height(a,{
	t:6.D}
)}
6.y[a.p]=(a.offsetHeight>0)?0:1;
	6.v();
	a.Q.toggle()}
}
);
	',[],79,'||||||this||wrapper|function||||||if|style|val||dfGrid|var|unit|start|new|element|id|resizer|toggleReady|body|duration|Fx|saveState|opacity|fontSize|blocks|left|true|document|right|swipeSpeed|_0|onComplete|custom|else|div|offsetWidth|split|blockval|initDiv|100|dfCookies|create|heightFx|for|fadeSpeed|toggleDiv|swipeOut|Width|isNaN|width|options|loadState|swipeIn|cookie|Opacity|init|fadeOut|initWidth|500|resizeFont|parseFloat|fadeIn|0px|dfgrid|return|get|length||push'.split('|'),0,{
}
))

CSS代码(dfFlexiGrid.css):

body{margin:0;padding:0;font-family:Arial;font-size:0.75em;}
#wrapper{margin:0 auto;}
#header{background:#666;padding:5px;}
#header a{text-decoration:none;padding:0 15px;color:#FFF;}
#left_column{background:#99CC33;float:left;width:200px;overflow:hidden;display:block;}
.left_column{background:#99CC33;float:left;width:170px;overflow:hidden;padding:15px;}
.block1{border:3px solid #FFF;background:#0F0;}
#right_column{background:#99CC33;float:right;width:200px;overflow:hidden;z-index:99;}
.right_column{background:#99CC33;float:right;width:170px;overflow:hidden;z-index:99;padding:15px;}
#center_column{overflow:hidden;background:#ccc;/*height:1%;*/
}
.center_column{padding:15px;background:#ccc;/*height:1%;overflow:hidden;*/
}
.blockdivider{padding:15px;background:#666;}
.accord_toggle{text-decoration:none;color:#FFF;}

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