超酷滚动公式实现自定义滚动条

核心提示： （4）测试影片，如下图所示，超酷滚动公式实现自定义滚动条(6)，: 现在你已经能制作自已的滚动条了，你只需要发挥一下设计能力，公式的应用function updateContentPos(){var percent_scrolled =(dragger._y-btnup._height)/

（4）测试影片，如下图所示。:

现在你已经能制作自已的滚动条了，你只需要发挥一下设计能力，就会诞生一个自定义的有特色的滚动条了。

3．为自定义滚动条加入缓动

有了上面的范例，要加入easing缓动，就很简单了，对于easing无非就是新位置和老位置的问题，对于当前的滚动条来说，只要在拖动时让contentMain不断地移向新位置就可以了。移动过程就是要加入easing的过程。

范例14 演示文件

针对这个范例的其他操作过程这里就不赘述了，现在直接打开上例中的源文件scrollbar.fla。

选中第1帧，打开ActionScript面板，将其中的代码做一下简单的改写如下。

代码:

function scrolling (easing){
　　//滚动速度
　　var moveSpeed = 1;
　　var easingSpeed =10;
　　var scrollHeight = scrollbg._height;
　　//可滚动的区域
　　var scrollable = contentMain._height - maskedView._height;
　　var top_scroll = contentMain._y;
　　//滑块可拖动的区域
　　var left = scrollbg._x;
　　var top = scrollbg._y;
　　var right = scrollbg._x;
　　var bottom = scrollbg._y+scrollbg._height-dragger._height;
　　//在开始前检测滚动是否可行，如果内容高度不足则不执行滚动，隐藏dragger等，并返回
　　if(scrollable <0){
　　　　dragger._visible =false;
　　　　btnup._alpha =50;
　　　　btndown._alpha =50;
　　　　scrollbg._alpha=50;
　　　　btnup.enabled = false;
　　　　btndown.enabled = false;
　　　　return;
　　}
　　//更新滚动内容的位置，公式的应用
　　function updateContentPos(){
　　　　var percent_scrolled =(dragger._y-btnup._height)/(scrollHeight-dragger._height);
　　　　contentMain.newY = Math.round(top_scroll -(scrollable * percent_scrolled));
　　}
　　contentMain.onEnterFrame = function()
　　{
　　　　if (!easing || easing == undefined)
　　　　{
　　　　　　this._y = this.newY;
　　　　}
　　　　else
　　　　{
　　　　　　this._y += (this.newY-this._y)/easingSpeed;
　　　　}
　　};
　　//拖动滑块
　　dragger.onPress = function(){
　　　　startDrag(this,false,left,top,right,bottom);
　　　　this.onMouseMove = function(){
　　　　　　updateContentPos();
　　　　}
　　}
　　dragger.onRelease = function(){
　　　　stopDrag();
　　　　delete this.onEnterFrame;
　　}
　　btnup.onPress = function(){
　　　　this.onEnterFrame = function(){
　　　　　　//技巧
　　　　　　dragger._y = Math.max(top,dragger._y-moveSpeed);
　　　　　　updateContentPos();
　　　　}
　　}
　　btnup.onRelease = function(){
　　　　delete this.onEnterFrame;
　　}
　　btndown.onPress = function(){
　　　　this.onEnterFrame = function(){
　　　　　　dragger._y = Math.min(bottom,dragger._y+moveSpeed);
　　　　　　updateContentPos();
　　　　}
　　}
　　btndown.onRelease = function(){
　　　　delete this.onEnterFrame;
　　}
　　updateContentPos();
}
//调用函数
scrolling(true);

在这段代吗中所有标红的部分是修改过的，我们在scrolling函数中加入了一个开关，可用来打开和关闭easing。