超酷滚动公式实现自定义滚动条
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);
在这段代码中,有两处变化,一处是我们把原来的scrolling(easeing)函数增加了一个参数,变为scrolling(easeing,auto),目的是可以随意的开关,另一处就是自动滚动代码段,我已经标出了自动滚动代码段.
[]
赞助商链接