jQuery全屏动态图片墙特效代码

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

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

以下是 jQuery全屏动态图片墙特效代码的示例演示效果:

当前平台(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全屏动态图片墙效果</title>
<link rel="stylesheet" href="css/zzsc.css" type="text/css"/>
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>
<div id="bigshow"></div>
<ul id="pic">
	<li class="images"><img src="images/small/01.jpg" width='200' height='200' /></li>
	<li class="images"><img src="images/small/02.jpg" width='200' height='200'/></li>
	<li class="images"><img src="images/small/03.jpg" width='200' height='200'/></li>
	<li class="images"><img src="images/small/04.jpg" width='200' height='200'/></li>
	<li class="images"><img src="images/small/05.jpg" width='200' height='200'/></li>
	<li class="images"><img src="images/small/06.jpg" width='200' height='200'/></li>
</ul>

</body>
</html>

JS代码(zzsc.js):

function getClass(oParent,sClass){
	var value=[];
	var Ele=oParent.getElementsByTagName('*');
	for(var i=0;
	i<Ele.length;
	i++){
	var aClass=Ele[i].className.split(' ');
	for(n=0;
	n<aClass.length;
	n++){
	if(aClass[n]==sClass){
	value.push(Ele[i]);
}
}
}
return value;
}
function getStyle(obj,name){
	if(obj.currentStyle){
	return obj.currentStyle[name];
}
else{
	return getComputedStyle(obj,false)[name];
}
}
function startRuning(obj,json,fnEnd){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
	var bStop=true;
	var now=0;
	var speed=0;
	for (var attr in json){
	if(attr=='opacity'){
	now=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
	now=parseInt(getStyle(obj,attr));
}
speed=(json[attr]-now)/10;
	speed=speed>0?Math.ceil(speed):Math.floor(speed);
	if(now!=json[attr])bStop=false;
	if(attr=='opacity'){
	obj.style.filter='alpha(opacity:'+now+speed+')';
	obj.style.opacity=(now+speed)/100;
}
else{
	obj.style[attr]=now+speed+'px';
}
}
if(bStop){
	clearInterval(obj.timer);
	if(fnEnd)fnEnd();
}
}
,30);
}
window.onload=function(){
	var oUL=document.getElementById('pic');
	var oImages=getClass(oUL,'images');
	var bigPic=document.getElementById('bigshow');
	var space=Math.ceil((document.documentElement.clientWidth-oImages[0].offsetWidth*oImages.length)/oImages.length);
	var CenterX=Math.ceil(document.documentElement.clientWidth/2);
	var CenterY=Math.ceil(document.documentElement.clientHeight/2);
	var open=false;
	var now=0;
	var bg=['url(images/big/01.jpg)','url(images/big/02.jpg)','url(images/big/03.jpg)','url(images/big/04.jpg)','url(images/big/05.jpg)','url(images/big/06.jpg)',];
	bigPic.onclick=function(){
	startRuning(this,{
	opacity:0}
);
}
for(var i=0;
	i<oImages.length;
	i++){
	var rotate=Math.random()*40-20;
	oImages[i].style.webkitTransform='rotate('+rotate+'deg)';
	oImages[i].style.MozTransform='rotate('+rotate+'deg)';
	oImages[i].style.transform='rotate('+rotate+'deg)'}
function close(){
	var i=0;
	var timer=setInterval(function(){
	startRuning(oImages[i],{
	left:0,opacity:100,bottom:-50}
);
	i++;
	if(i==oImages.length){
	clearInterval(timer);
	open=false;
}
}
,30);
}
for(var i=0;
	i<oImages.length;
	i++){
	oImages[i].index=i;
	oImages[i].onclick=function(){
	now=this.index;
	if(open){
	startRuning(this,{
	bottom:CenterY,left:CenterX,opacity:0}
,function(){
	close();
	bigPic.style.backgroundImage=bg[now];
	startRuning(bigPic,{
	opacity:100}
);
}
);
}
else{
	var i=oImages.length-1;
	var timer=setInterval(function(){
	var between=oImages[i].offsetWidth*i+space*i;
	startRuning(oImages[i],{
	left:between}
);
	i--;
	if(i<0){
	clearInterval(timer);
	open=true;
}
}
,30);
}
}
}
var autostart=setTimeout(function(){
	for(var i=0;
	i<oImages.length;
	i++){
	startRuning(oImages[i],{
	bottom:-50,opacity:100}
);
}
}
,1000);
}

CSS代码(zzsc.css):

*{margin:0px;padding:0px;font-size:12px;font-family:'Arial';}
body{background:url('../images/bg.jpg');background-size:cover;overflow:hidden;background-position:center;background-attachment:fixed;}
#pic{list-style:none;position:absolute;left:0px;bottom:0px;}
#pic .images{width:200px;height:200px;position:absolute;left:0px;bottom:-250px;border:1px solid white;-webkit-box-shadow:0 0 25px white;-moz-box-shadow:0 0 25px white;box-shadow:0 0 25px white;filter:alpha(opacity:30);opacity:0.3;cursor:pointer;}
#bigshow{width:800px;height:600px;margin:50px auto;position:relative;border:3px solid #fff;-webkit-box-shadow:10px 10px 25px white;-moz-box-shadow:10px 10px 25px white;box-shadow:10px 10px 25px white;filter:alpha(opacity:0);opacity:0;}
.show{width:800px;height:600px;margin:100px auto;border:3px solid white;}
#foot_bm a,p,p a{font-size:12px;color:#666;}

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