flash超酷滚动公式实现自定义滚动条 |
| [来源：闪客无忧 | 作者：佚名 | 时间：2008-03-29 | 点击： | 收藏本文 【大 中 小】] |
|
|
| |
在这段代吗中所有标红的部分是修改过的，我们在scrolling函数中加入了一个开关，可用来打开和关闭easing。
在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()方法。如果你实在做不出来，可以访问如下地址提出疑问。
ws-forum:http://www.webstudio.com.cn/forum.
附加内容:
上边的内容为本书原稿内容,下面是应群内网友的要求,特增加如下两个功能.自动滚动和中键滚动.
自动滚动
演示文件
如果你能完成上面的例子,并理解了滚动公式,那现面的问就变得很简单了.
操作方法:
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);
|
| 上一页 1 2 3 4 56 7 下一页 |
| 文章如果有错误或者缺少文件，请发邮件提交给我们 |
|
|
|
|
|
|
|
| >>> 最新评论:(共有 0 位网友发表了评论) 查看所有评论 |
|
|
| 发表评论 |
|
| ·本站发布内容均为客观表达作者观点，不代表闪无忧立场，请勿攻击和漫骂 |
| ·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任 |
| ·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据 |
| ·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为 |
|
|
