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.效果展示：
