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

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

核心提示： 代码://自动滚动代码段if (auto == true) {onEnterFrame = function () {if (dragger._y<bottom) {dragger._y = dragger._y+0.2;updateContentPos();} else {drag

代码:

//自动滚动代码段
　　if (auto == true) {
　　　　onEnterFrame = function () {
　　　　　　if (dragger._y<bottom) {
　　　　　　　　dragger._y = dragger._y+0.2;
　　　　　　　　updateContentPos();
　　　　　　} else {
　　　　　　　　dragger._y = top;
　　　　　　}
　　　　};
　　}

在变段代码中,如果scrolling(true,true)则开启easing缓动和自动功能,所以在自动滚动代码段中判断auto是否等于true,如果等于执行自动滚动,因为在scrollbar_ease.fla中我们已经知道了拖动dragger滑块就可以实现滚动,现在要做的就是自动的让dragger滑块滑动.ok. 通过onEnterFrame的循环,不断的让dragger._y增加,同进调用updateContentPos()函数来更新内容的位置.当dragger._y到底端bottom时,回到top顶端..

4.　　现在就测试吧.

鼠标中键滚动演示文件

有了上面的过程,下面的这个过程,我们只是在增加一段代码,操作如下:

1.　　打开刚刚完成的auto_scrollbar_ease.fla.将它另存为mouse_scrollbar_ease.fla

2.　　打开actionscript面板.修改上面的代码:

代码:

//copyright by webstudio.com.cn author by egoldy.
function scrolling(easing, auto, mouse) {
　　//滚动速度
　　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;
　　　　　　}
　　　　};
　　}
　　//+++++++++++++++++++++++++++++++++++++++++++　
　　//中键滚动代码段
　　if (mouse == true) {
　　　　var mouseListener = new Object();
　　　　//创建onMouseWheel函数
　　　　mouseListener.onMouseWheel = function(delta) {
　　　　　　if (dragger._y<bottom) {
　　　　　　　　dragger._y += delta+3;
　　　　　　　　updateContentPos();
　　　　　　} else {
　　　　　　　　dragger._y = bottom-3;
　　　　　　}
　　　　　　if (dragger._y>top) {
　　　　　　　　dragger._y += delta;
　　　　　　　　updateContentPos();
　　　　　　} else {
　　　　　　　　dragger._y = top;
　　　　　　}
　　　　};
　　　　Mouse.addListener(mouseListener);
　　}
　　//++++++++++++++++++++++++++++++++++++++++++++
}
//调用函数
scrolling(true, false, true);