struts2如何实现页面分步骤滑动

1.在css文件中加入这两个元素：

.fcwindow
{
	width:990px;
	position:relative;
	min-height:400px;
	overflow-x:hidden
}

#fccontent
{
	position:relative;
	width:3960px;
	overflow-x:hidden;
}

2.在js文件中加入代码：

fcnext是下一步！

fcup是上一步！

然后fcpArray里面的函数，就是各个步骤触发的函数，自行填写即可。在测试阶段可以：

a = function(){
    alert("function a");
}
b = function(){
    alert("function b");
}
c = function(){
    alert("function c");
}

var fcprocess = 0;// 当前步骤
var fcmaxprocess = 4;// 最大步骤数
var baseMoveLength = 990;// 步骤移动距离
var moveSpeed = 1000;//
var fcpArray = new Array();// 步骤切换时，触发函数

//切换函数
fcpArray.push(a);
fcpArray.push(b);
fcpArray.push(c);


this.fcnext = function(index) {
	var left = $("#fccontent").css("left");
	
	var movedis = 0;
	if (left == "auto") {
		movedis = -baseMoveLength;
	} else {
		var l = left.length;
		var d = left.substr(0, l - 2);
		// alert(d+"-"+left);
		movedis = new Number(d);
		movedis -= baseMoveLength;
		// alert(moveid+"ds"+d);
	}
	
	$("#fccontent").animate({
		left : movedis
	}, moveSpeed, function() {
		if (index >= 0) {
			fcpArray[index]();
		}

	});
};
this.fcup = function(index) {
	var movedis = 0;
	var left = $("#fccontent").css("left");
	if (left == "auto") {
		movedis = 0;
	} else {
		var l = left.length;
		var d = left.substr(0, l - 2);
		movedis = new Number(d);
		movedis += baseMoveLength;

	}

	$("#fccontent").animate({
		left : movedis
	}, moveSpeed, function() {
		if (index >= 0) {
			fcpArray[index]();
		}
	});
};

3.效果展示：

struts2如何实现页面分步骤滑动,布布扣,bubuko.com

struts2如何实现页面分步骤滑动

原文：http://blog.csdn.net/emaste_r/article/details/23202535