jQuery流布局伸缩放大特效js代码

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

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

以下是 jQuery流布局伸缩放大特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
	<title>jQuery plugin - Flex - Demo</title>
	<link href="bootstrap.min.css" rel="stylesheet">
	<style>
		body {background-color:#CCC;font-family:Verdana;}
		.flex {position:relative;width:850px;min-height:300px;margin:0 auto;border:0px solid red;margin-top:10px;}
		.flex a {background-color:white;display:block;width:100px;height:100px;border-radius:8px;position:absolute;background-repeat:no-repeat;background-position:center;border:3px solid white;cursor:pointer;text-align:left;text-shadow:1px 1px 20px #000;color:white;font-size:18px;font-weight:bold;text-indent:10px;line-height:30px;text-decoration:none;}
		[bg=a] {background-image:url(images/6448917381_0b754e86fb_z.jpg);}
		[bg=b] {background-image:url(images/7362866426_bf285ebd45.jpg);background-size:300px auto;}
		[bg=c] {background-image:url(images/7410370290_0935419fc3.jpg);}
		[bg=d] {background-image:url(images/7419245080_bb752ed1d6.jpg);}
		[bg=e] {background-image:url(images/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
		[bg=f] {background-image:url(images/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
		[bg=g] {background-image:url(images/7322604950_348c535903.jpg);background-size:auto 200px;}
		[bg=h] {background-image:url(images/7286717012_6e6b450243.jpg);}
		[bg=i] {background-image:url(images/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
		[bg=j] {background-image:url(images/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
		[bg=k] {background-image:url(images/7269592732_c4b7918626.jpg);background-size:auto 280px;}
		h1, h3 {width:850px;font-weight:normal;margin:0 auto;}
		h1 {margin-top:100px;}
		h3 {color:#666;margin-top:5px;}
		p {width:850px;margin:0;padding:0;margin:0 auto;font-size:14px;color:black;margin-top:0px;margin-bottom:20px;color:#989898;}
		#buttons {height:75px;width:850px;margin:0 auto;margin-top:10px;}
		#buttons a {float:left}
		.marginleft {margin-left:25px;}
	</style>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/jquery.flex.js"></script>
	<script type="text/javascript">
	$(function() {
	    $(".flex").flex();
	});
	</script>
</head>
<body>
	<div class="flex">
		<a bg="a" style="left:0px;top:0px;width:250px;height:125px;" width="350" height="275">A</a>
		<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
		<a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
		<a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
		<a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
		<a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
		<a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="225" height="150">G</a>
		<a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
		<a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="250" height="140">I</a>
		<a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
		<a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a>
	</div>	
</body>
</html>

JS代码(jquery.flex.min.js):

/** * jQuery Flex v0.2 * A fluid asymmetrical animated grid plugin for jQuery * http://jsonenglish.com * * Licensed under the MIT license. * Copyright 2012 Jason English */
(function(b,d){
	var c={
	duration:300,padding:10,threshhold:50}
;
	function a(f,e){
	this.version="0.2";
	this.element=b(f);
	this.tiles=this.element.find("a");
	this.options=b.extend({
}
,c,e);
	this.list=[];
	this.cache=[];
	this.init()}
a.prototype.init=function(){
	this.buildCache();
	this.createEvents()}
;
	a.prototype.createCacheObj=function(e){
	return{
	elm:e,defaults:{
	width:e.width(),height:e.height(),left:parseInt(e.css("left"),10),top:parseInt(e.css("top"),10)}
,expanded:{
	width:parseInt(e.attr("width"),10),height:parseInt(e.attr("height"),10),left:parseInt(e.css("left"),10),top:parseInt(e.css("top"),10)}
}
}
;
	a.prototype.buildCache=function(){
	var g=this.tiles,h,f=g.length;
	for(var e=0;
	e<f;
	e++){
	h=b(g[e]);
	this.list.push(this.createCacheObj(h));
	this.cache[e]=this.list[this.list.length-1];
	h.data("flex-cache",e)}
}
;
	a.prototype.createEvents=function(){
	var e=this;
	this.tiles.on("mouseenter",function(){
	e.change(this);
	e.animate("grow")}
).on("mouseleave",function(){
	e.animate("shrink")}
)}
;
	a.prototype.getCache=function(e){
	return this.cache[b(e).data("flex-cache")]}
;
	a.prototype.animate=function(g){
	var f={
	queue:false,duration:300}
,e=0;
	if(g==="grow"){
	for(;
	e<this.changes.length;
	e++){
	this.changes[e].elm.dequeue().animate(this.changes[e].change,f)}
}
else{
	for(;
	e<this.list.length;
	e++){
	this.list[e].elm.dequeue().animate(this.list[e].defaults,f);
	delete this.list[e].change;
	delete this.list[e].start;
	delete this.list[e].adjusted}
}
}
;
	a.prototype.getPositions=function(e){
	return[[e.left,(e.left+e.width)],[e.top,e.top+e.height]]}
;
	a.prototype.comparePositions=function(h,g){
	var f,e;
	f=h[0]<=g[0]?h:g;
	e=h[0]<=g[0]?g:h;
	return f[1]>=e[0]||f[0]===e[0]}
;
	a.prototype.overlaps=function(f,e){
	var h=this.getPositions(f.change),g=this.getPositions(e.change||e.defaults);
	return this.comparePositions(h[0],g[0])&&this.comparePositions(h[1],g[1])}
;
	a.prototype.intersectors=function(h,f){
	var g=(f)?this.changes:this.list,i=[];
	for(var e=0;
	e<g.length;
	e++){
	if(g[e].elm[0]!==h.elm[0]&&!g[e].start&&!g[e].adjusted&&this.overlaps(h,g[e])){
	i.push(g[e])}
}
return i}
;
	a.prototype.adjust=function(f,u){
	var s,k,i,v,p={
}
,r=u,o=false,g=this.options.threshhold,q=this.options.padding,n=f.defaults.top>r.defaults.top+r.defaults.height,m=f.defaults.top+f.defaults.height<r.defaults.top,j=f.defaults.left<r.defaults.left,e=f.defaults.left>r.defaults.left+r.defaults.width;
	if(m||n){
	s=f.defaults.width}
else{
	if(e){
	s=f.defaults.left+f.defaults.width-(r.change.left+r.change.width)-q}
else{
	s=r.change.width-f.defaults.width+q}
}
if(s<g){
	s=g;
	o=true}
if(n||m){
	k=f.defaults.height+f.defaults.top-r.change.height-q}
else{
	if(e){
	k=f.defaults.height}
else{
	k=r.change.height-f.defaults.height}
}
if(k<g){
	k=g;
	o=true}
if(n||m){
	i=f.defaults.left}
else{
	if(e){
	i=(r.change.left+r.change.width)+q}
else{
	i=r.change.left+r.change.width+q}
}
if(n){
	v=r.change.top+r.change.height+q}
else{
	v=f.defaults.top}
return[{
	width:s,height:k,left:i,top:v}
,o]}
;
	a.prototype.recursion=function(f){
	var m,n,s,e,j,g,o,h=this.times,r=this.changes,l,q=0,u=r.length,k=0;
	for(;
	q<u;
	q++){
	l=r[q];
	if(f){
	if(l.elm[0]===f.elm[0]){
	l.start=true;
	l.change=l.expanded;
	k++;
	break}
}
if(l.change&&!l.adjusted){
	if(!this.first){
	this.first=true;
	l.adjusted=true}
j=this.intersectors(l,true);
	for(o=0;
	o<j.length;
	o++){
	e=j[o];
	if(!e.start&&e.elm[0]!==l.elm[0]){
	s=this.adjust(e,l);
	for(g=0;
	g<r.length;
	g++){
	if(e.elm[0]===r[g].elm[0]&&!r[g].adjusted){
	m=r[g];
	n=s[0];
	if(m.change&&(m.change.width===n.width&&m.change.height===n.height&&m.change.left===n.left&&m.change.top===n.top)){
	r[g].adjusted=true}
else{
	r[g].change=s[0];
	k++}
break}
}
}
}
}
}
if(k){
	this.recursion()}
}
;
	a.prototype.change=function(g){
	var f=this.getCache(g),e=[];
	this.changes=b.extend(true,[],this.list);
	this.first=null;
	this.recursion(f)}
;
	b.fn.flex=function(e){
	var g=this.data("flex"),f=e||{
}
;
	if(g){
	return g}
this.each(function(){
	g=new a(this,f);
	b(this).data("flex",g)}
);
	return f.api?g:this}
}
)(jQuery);

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