弹性图片相册分页切换展示特效代码

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

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

以下是弹性图片相册分页切换展示特效代码的示例演示效果:

当前平台(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>弹性图片相册分页切换展示</title>
<link href="css/back.css" type="text/css" rel="stylesheet" />
</head>		
<body>

<div id="box">
	<div class="list"><img src='img/imsc/1.jpg'/></div>
	<div class="list"><img src='img/imsc/2.jpg'/></div>
	<div class="list"><img src='img/imsc/3.jpg'/></div>
	<div class="list"><img src='img/imsc/4.jpg'/></div>
	<div class="list"><img src='img/imsc/5.jpg'/></div>
	<div class="list"><img src='img/imsc/6.jpg'/></div>
	<div class="list"><img src='img/imsc/7.jpg'/></div>
	<div class="list"><img src='img/imsc/8.jpg'/></div>
	<div class="list"><img src='img/imsc/9.jpg'/></div>
	<div class="list"><img src='img/imsc/10.jpg'/></div>
	<div class="list"><img src='img/imsc/11.jpg'/></div>
	<div class="list"><img src='img/imsc/12.jpg'/></div>
</div> 
   
<div id="page">
	<a href="javascript:void(0);" class="active">1</a>
	<a href="javascript:void(0);">2</a>
	<a href="javascript:void(0);">3</a>
</div>

<script type="text/javascript" src="js/move.js"></script>    
<script type="text/javascript">
window.onload = function(){
	var Box = document.getElementById('box');
	var list_l = myclass('list',Box);
	var aLi = document.getElementById('page').getElementsByTagName('a');
	var alist = [];
	var olist = true;
	for(var i=0; i<list_l.length; i++){
		var Oleft = list_l[i].offsetLeft;
		var Otop = list_l[i].offsetTop;
		alist[i] = {left:Oleft,top:Otop}
	}
	for(var i=0; i<list_l.length; i++){
		list_l[i].style.left = alist[i].left+"px";
		list_l[i].style.top = alist[i].top+"px";
		list_l[i].style.position = "absolute";
		list_l[i].style.margin =0+"px";
		list_l[i].style.opacity =1;
	}
	for(var i=0; i<aLi.length; i++){
		aLi[i].index = i;
		aLi[i].onclick = function(){
			if(olist===false){
				return;
			}
			olist = false;
			list_l = myclass('list',Box);
			for(var n=0; n<aLi.length; n++){
				aLi[n].className="";
			}
			this.className="active";
			var Dates = sst(this.index);
			var n=list_l.length-1;
			var cont = 0;
			var t=setInterval(function(){
				buffer(list_l[n],{
					top:150,
					left:150,
					width:50,
					height:30,
					opacity:0
				},2,function(){
					Box.removeChild(this);
					cont++;
					if(cont==list_l.length){
						juest(Dates)
					}
					if(n<0){
						clearInterval(t);
					}
				})
				n--;
			},100)
			function juest(Dates){
				var i=0;
				var t=setInterval(function(){
					if(i==Dates.length-1){
						clearInterval(t);
						olist=true;
					}
					var Odiv = document.createElement('div');
					var Oimg = document.createElement('img');
					Odiv.className="list";
					Oimg.src = Dates[i];
					Box.appendChild(Odiv);
					Odiv.appendChild(Oimg);
					Odiv.style.top= 150 +'px';
					Odiv.style.left=150+'px';
					Odiv.style.width = 50+'px';
					Odiv.style.height=30+'px';
					Odiv.style.position ='absolute';
					Odiv.style.margin=0+'px';
					fiexible(Odiv,{
						left:alist[i].left,
						top:alist[i].top,
						width:100,
						height:60
					},3)
					i++;
					},100)
			}
			function sst(nums){
				var Mus = nums*12;
				var end = Mus+12;
				var rest = [];
				for(var i=Mus+1; i<=end; i++){
					rest.push('img/imsc/'+i+'.jpg')
				}
				return rest;
			}
		}
		
	}
	
}
function myclass(names,docu){
	var obj = docu.getElementsByTagName('*');
	var arr = [];
	for(var i=0; i<obj.length; i++){
		if(obj[i].className == names){
			arr.push(obj[i]);
			}
		} 
		return arr;
	}
</script>
</body>
</html>

JS代码(move.js):

/** * 获取样式 * @param{
	Object}
obj * @param{
	Object}
attr */
function getStyle(obj,attr){
	if(obj.currentStyle){
	return obj.currentStyle[attr];
}
else{
	return getComputedStyle(obj,false)[attr];
}
}
/** * 缓冲运动动画 * @param{
	Object}
obj对象 * @param{
	Object}
json运动目标值 * @param{
	Object}
speed速度 * @param{
	Object}
fn运动完成回调函数 */
function buffer(obj,json,speed,fn){
	var speed = speed || 5;
	clearInterval(obj.t)//开始前关闭原有的定时器 obj.t=setInterval(function(){
	var endMove=true;
	//设置运动停止初始值 for(var attr in json){
	// iCur 更新运动元素当前的属性值if(attr=='opacity'){
	//对透明度单独处理var iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
}
else{
	//普通样式var iCur = parseInt(getStyle(obj,attr));
}
// 速度取整var iSpeed=(json[attr]-iCur)/speed>0?Math.ceil((json[attr]-iCur)/speed):Math.floor((json[attr]-iCur)/speed);
	//检测是否到目标点if(iCur!=json[attr]){
	endMove=false;
}
//设置样式，对透明度单独处理if(attr=='opacity'){
	obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')';
	obj.style.opacity=(iCur+iSpeed)/100;
}
else{
	obj.style[attr]=iCur+iSpeed+'px';
}
}
//运动完成，关闭定时器 if(endMove){
	clearInterval(obj.t)obj.t = null;
	if(fn){
	//回调函数存在，调用回调函数，并把当前对象做为thisfn.call(obj);
}
}
}
,30);
}
/** * 弹性运动动画 * @param{
	Object}
obj对象 * @param{
	Object}
json运动目标值 * @param{
	Object}
way是否从中点开始运动 * @param{
	Object}
fn运动完成回调函数 */
function fiexible(obj,json,way,fn){
	/*** 按坐标运动 ***/
if(way === true){
	//检测left 与 top 是否都有值if(typeof json.left !='undefined' && typeof json.top !='undefined'){
	var x = Math.floor(json.left + json.width/2);
	//计算X轴中心点var y = Math.floor(json.top + json.height/2);
	//计算Y轴中心点//设置初始的left 和 top 值 并让元素显示obj.style.display = 'block';
	obj.style.left = x-(parseInt(getStyle(obj,'width'))/2) + 'px';
	obj.style.top = y-(parseInt(getStyle(obj,'height'))/2) + 'px';
	//清除marginobj.style.margin = 0 + 'px';
}
}
var newJson ={
}
/*** 往参数中添加位置属性 用于设置元素的运动初始点 ***/
for(var arg in json){
	newJson[arg] = [json[arg],parseInt(getStyle(obj,arg))]//newJson[arg] = [运动目标点,运动初始点];
}
var oSite ={
}
;
	/** 添加单独的属性值 **/
for(var attr in newJson){
	oSite[attr] ={
	iSpeed:0,curSite:newJson[attr][1],bStop:false}
;
	//oSite[attr] ={
	运动初始速度,运动当前值,判断是否完成运动依据}
;
}
/** 运动开始前关闭本身的定时器 **/
clearInterval(obj.t);
	obj.t = setInterval(function(){
	/*** 循环运动属性 ***/
for (var attr in newJson){
	/** 运动状态 **/
oSite[attr].bStop = false;
	// iCur 更新运动元素当前的属性值if(attr=='opacity'){
	//对透明度单独处理var iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
}
else{
	//普通样式var iCur = parseInt(getStyle(obj,attr));
}
oSite[attr].iSpeed += (newJson[attr][0] - iCur) /5;
	//加速oSite[attr].iSpeed *= 0.75;
	//磨擦oSite[attr].curSite += oSite[attr].iSpeed;
	//更新运动的当前位置//运动停止条件 速度绝对值小于1 并且 当前值与目标值的差值的绝对值小于一if (Math.abs(oSite[attr].iSpeed) < 1 && Math.abs(iCur - newJson[attr][0]) < 1){
	//设置样式，对透明度单独处理if(attr=='opacity'){
	obj.style.filter='alpha(opacity='+newJson[attr][0]+')';
	obj.style.opacity=newJson[attr][0]/100;
}
else{
	obj.style[attr] = newJson[attr][0] + 'px';
	//设置到目标点}
oSite[attr].bStop = true;
	//设置当前属性运动是否完成}
else{
	//更新运动对象的属性值if(attr=='opacity'){
	obj.style.filter='alpha(opacity='+oSite[attr].curSite+')';
	obj.style.opacity=oSite[attr].curSite/100;
}
else{
	obj.style[attr] = oSite[attr].curSite + 'px';
}
}
}
// 校验定时器停止if(checkStop(oSite)){
	clearInterval(obj.t);
	if(fn){
	fn.call(obj)}
}
}
,30);
	/** 校验运动是否完成 **/
function checkStop(oSite){
	for(var i in oSite){
	if(oSite[i].bStop === false){
	return oSite[i].bStop;
}
}
return true;
}
}

CSS代码(back.css):

@charset "utf-8";/*实例样式*/
*{margin:0px;padding:0px;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
/* box */
#box{width:496px;_width:488px;height:256px;margin:60px auto;border:1px solid #ddd;box-shadow:0px 0px 5px #ddd;padding:10px;position:relative;}
#box .list{width:100px;height:60px;padding:5px;margin:6px 6px 6px 6px;border:1px solid #dedede;box-shadow:0px 0px 5px #dedede;overflow:hidden;_margin:6px 6px 6px 3px;float:left;filter:alpha(opacity=100);opacity:100;background:#FFF;}
#box .list img{width:100%;height:100%;}
#page{width:480px;height:30px;text-align:center;margin:10px auto;}
#page a{padding:3px 8px;background:#FFF;border:1px solid #ddd;text-decoration:none;box-shadow:0px 0px 3px #ddd;color:#333;}
#page a.active{background:red;}

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