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

　2007-01-04 10:57:59　来源：WEB开发网　　　

核心提示： 在updateContentPos()函数中我们把原有的contentMain._y改为contentMain.newY，通过它确定移动的新位置目标，超酷滚动公式实现自定义滚动条(7)，下面的这段代码就是移动到新位置的缓动过程，代码:contentMain.onEnterFrame = f

在updateContentPos()函数中我们把原有的contentMain._y改为contentMain.newY，通过它确定移动的新位置目标。下面的这段代码就是移动到新位置的缓动过程。

代码:

contentMain.onEnterFrame = function()
　　{
　　　　if (!easing || easing == undefined)
　　　　{
　　　　　　this._y = this.newY;
　　　　}
　　　　else
　　　　{
　　　　　　this._y += (this.newY-this._y)/easingSpeed;
　　　　}
};

最后通过scrolling(true)传递true给easing来执行缓动，如果不执行缓动，那么newY仍是原值this._y。

这种标准的缓动在前面的第3章就已经有过介绍，现在看上去并不算复杂了，只要理解了原理，就增加了无限的创意空间了。

最后给你留下一点发挥的空间，你可以试试缓动动态载入文本，做一提示，在遮罩时需要应用setMask()方法。

附加内容:

上边的内容为本书原稿内容,下面是应群内网友的要求,特增加如下两个功能.自动滚动和中键滚动.

自动滚动演示文件

如果你能完成上面的例子,并理解了滚动公式,那现面的问就变得很简单了.

操作方法:

1.　　打开scrollbar_ease.fla文件,将其另存为auto_scrollbar_ease.fal

2.　　打开后,选中actionscript层,按下F9,打开actionscript面板.我们将在此代码的基础上进行修改.

3.　　将原来的代码修改为所下所示:

代码:

//copyright by webstudio.com.cn.author by egoldy.
function scrolling(easing, auto) {
　　//滚动速度
　　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));
　　　　trace(contentMain.newY);
　　}
　　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 = dragger.onReleaseOutside=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();
　　//++++++++++++++++++++++++++++++++++++++++++
　　//自动滚动代码段
　　if (auto == true) {
　　　　onEnterFrame = function () {
　　　　　　if (dragger._y<bottom) {
　　　　　　　　dragger._y = dragger._y+0.2;
　　　　　　　　updateContentPos();
　　　　　　} else {
　　　　　　　　dragger._y = top;
　　　　　　}
　　　　};
　　}
　　
}
//调用函数
scrolling(true, true);