flash超酷滚动公式实现自定义滚动条 |
| [来源：闪客无忧 | 作者：佚名 | 时间：2008-03-29 | 点击： | 收藏本文 【大 中 小】] |
|
|
| |
在这段代码中,有两处变化,一处是我们把原来的scrolling(easeing)函数增加了一个参数,变为scrolling(easeing,auto),目的是可以随意的开关,另一处就是自动滚动代码段,我已经标出了自动滚动代码段.
| 代码: |
| |
//自动滚动代码段
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. 现在就测试吧.J
鼠标中键滚动
演示文件
有了上面的过程,下面的这个过程,我们只是在增加一段代码,操作如下:
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;
updateContentPos();
} else {
dragger._y = bottom;
}
if (dragger._y>top) {
dragger._y += delta;
updateContentPos();
} else {
dragger._y = top;
}
};
Mouse.addListener(mouseListener);
}
//++++++++++++++++++++++++++++++++++++++++++++
}
//调用函数
scrolling(true, false, true);
|
| 上一页 1 2 3 4 5 67 下一页 |
| 文章如果有错误或者缺少文件，请发邮件提交给我们 |
|
|
|
|
|
|
|
| >>> 最新评论:(共有 0 位网友发表了评论) 查看所有评论 |
|
|
| 发表评论 |
|
| ·本站发布内容均为客观表达作者观点，不代表闪无忧立场，请勿攻击和漫骂 |
| ·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任 |
| ·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据 |
| ·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为 |
|
|
