在工作中我们经常会用到内容滚动切换的效果,有人称之为幻灯片 也不知道是不是标准的称呼了 ,总之这类东西很多很多 几乎每天都在出现新的形式.
今天就遇到一个这样的问题,要求每个内容切换的时候,都以等距离滚动的形式出现,也就是只滚动一屏宽度就呈现需要的内容。看似很简单也很符合人们的认知习惯,但是其中却暗藏玄机。
我们先来看两个例子:
常规滚动切换 点击查看 DEMO 等距离滚动切换 点击查看DEMO
大家可以看到,常规的滚动切换 如果从1 一下切换到 10 则要滚动9个单位长度。
而 等距离的滚动切换 无论从何处切换到何处 均只需要滚动一个单位长度。
其实原理就是 只让需要的元素出现并参与滚动,不需要的就一边呆着凉快。
在写这个效果的时候,突然觉得用导演 、演员 、舞台 来形容它们还挺贴切的。于是ID 都按照这些取的。
程序的原理如下:
有一个老板(动画区域) <div class="slider" id="boss"> ...</div>
有一个舞台 只能容纳两个演员(滚动容器 只显示参与滚动的两个元素 )<ul id="stage" class="stage">...</ul>
有一个导演(控制条)<ul class="items" id="director">...</ul>
有一群演员(滚动内容) <ul id="actor">...</ul>
有一出戏 (滚动出现)function act(){ //演员演出 (动画函数)}
老板搭建了舞台 请了导演和演员,
导演来控制演员上场演出,需要谁演出谁才上场,不需要的就在台后歇着。
演出也很简单 ,就是前面一个演员滚出舞台,紧跟着后面的则滚入舞台区域.
由于台上只有两位演员(就当是二人转演出吧) 所以滚动只需要一个舞台的宽度就完成了切换。
老板不在的时候(鼠标不在动画区域),演员们挨个演出(自动切换);
老板来的时候(鼠标进入动画区域)停止演出等待导演的命令(鼠标点击控制区域控制);
由于有的导演想法变的太快(鼠标快速划过控制区域),所以我们给导演一定时间考虑(300毫秒鼠标延迟时间),以防止太多演员快速涌上舞台导致拥塞(触发大量动作消耗系统资源)
经过一段时间的排练,终于开演了,大家看看 : 点这里查看
还有一台演出形式多样(随机缓动切换):点这里查看
最后是演出的剧本:
var dela=false; //触发延时
var auto=false; //自动切换延时
var movetime=700; //演员上演过场时间 (图片滑动时间)
var wait=3000; //演员切换等待时间 (图片切换间隔)
var width=950; //舞台宽度(滚动元素宽度)
var index=0; // 哪个演员先上场 (起始序列)
var boss=$("#boss"); //我们的老板 它包揽着舞台 导演 和演员(动画区域)
var director=$("#director"); //这是我们的导演组
var dirli=director.find("li");
var dirlen=dirli.length-1; //导演一共控制着多少演员
var stage=$("#stage"); //舞台 (滚动的容器)
var actor=$("#actor"); //演员 (内容列表)
var repactor=""; //准备登台的演员 (将出现在stage的最后一个li中)
//标记当前
function cur(ele){
ele=$(ele)? $(ele):ele;
ele.addClass("cur").siblings().removeClass("cur");
}
dirli.each(function(i){
dirli.eq(i).mouseover(
function(){ //导演让几号演员出场 几号就出场
if(!$(this).hasClass("cur")){
dela=setTimeout(
function(){ //延时触发 防止触发过快
index=i; //导演出牌 (给出序列)
act(); //出场演出 (滚动出现)
},300);
}
}).mouseout(
function(){ //鼠标划出的时候则清除计时
if(dela){
clearTimeout(dela);
}
})
})
var actauto=function(){ //老板不在的时候(鼠标不在boss容器区域内)自动演出
auto = setInterval(
function(){ //循环出演
index++;
act();
if(index>=dirlen){index=-1;}
},wait);
}
var actpause=function(){ //老板来了(鼠标进入boss容器区域内)停止自动演出
if(auto){
clearInterval(auto);
}
}
boss.hover(actpause,actauto);
var act=function act(){ //演员演出 (动画函数)
repactor=actor.find("li").eq(index).html(); //准备需要演出的演员 (提取需要滚入的元素)
cur(director.find("li").eq(index)); //标记谁在表演 (标记当前显示序列)
stage.find("li:last").html(repactor); //演员登台准备 (将需要滚入的元素放入stage的最后一个容器中)
//在舞台上演出 (滚动一屏宽度以显示)
stage.animate(
{"left":-width+"px"},
{queue:false,
duration:movetime,
easing:"easeOutQuart",
complete: function(){ //演出完毕清场子(滚动完毕后的处理 stage复位)
stage.find("li:first").appendTo(stage);
stage.css({"left":0+"px"});
}
});
//end of actor
}
//自动开始
actauto();
//end of doment.ready
})