文本框滚动缓冲效果

作者：JTL  来源：JTL BLOG

今天写了这个效果的代码
用在主页的diary里
觉得以前用scroll对象来控制文本框，滚动起来比较生硬

其中drag为滚动条名字
block为文本框
b_up,b_down为上下滚动按钮

主要方法是用block始终跟随drag的位置变化而滚动
而b_up,b_down还有鼠标滚轮都是直接控制drag的位置变化的，从而间接控制文本框的滚动

演示地址：http://www.hartech.cn/tech/text.swf

详细说明请看代码注释：
// JTL
// http://www.hartech.cn
// e-mail: jtl.zheng@gmail.com

//初始化函数
function Var() {
  //滚动条与上下按钮的间隙
  space = 31;
  //上下按钮的滚动速度
  updown_speed = 5;
  //文本框的滚动范围
  block_range = block._height-mark._height;
  //文本框的初始位置
  block_origin = block._y;
  //滚动条的滚动范围
  drag_range = b_down._y-b_up._y-2*space;
  //滚动条的初始位置
  drag_origin = b_up._y+space;
  //初始化滚动条位置
  drag._y = drag_origin;
  //滚动缓冲系数
  k = .1;
}

Var();

//block为文本框，始终跟随滚动条（drag）变化
block.onEnterFrame = function() {
  //pos为文本框目标位置
  pos = block_origin-(drag._y-drag_origin)*block_range/drag_range;
  //缓冲效果
  this._y += (pos-this._y)*k;
};

drag.onPress = function() {
  this.startDrag(false, this._x, drag_origin, this._x, (drag_origin+drag_range));
};

drag.onRelease = function() {
  this.stopDrag();
};

//up_down按钮
b_up.onPress = function() {
  onEnterFrame = function () {
    if (drag._y<=drag_origin) {
      drag._y = drag_origin;
    } else {
      drag._y -= updown_speed;
    }
  };
};

b_up.onRelease = function() {
  onEnterFrame = null;
};

b_down.onPress = function() {
  onEnterFrame = function () {
    if (drag._y>=drag_origin+drag_range) {
      drag._y = drag_origin+drag_range;
    } else {
      drag._y += updown_speed;
    }
  };
};

b_down.onRelease = function() {
  onEnterFrame = null;
};

//侦听mouse滚轮
mouseListener = new Object();
mouseListener.onMouseWheel = function(delta) {
  if (delta>0) {
    drag._y -= updown_speed*2;
  }
  if (delta<0) {
    drag._y += updown_speed*2;
  }
  if (drag._y<=drag_origin) {
    drag._y = drag_origin;
  }
  if (drag._y>=drag_origin+drag_range) {
    drag._y = drag_origin+drag_range;
  }
};

Mouse.addListener(mouseListener);

建立文本框代码
loadVariables("text/diary.txt", this);
  myTextFormat = new TextFormat();
  myTextFormat.font = "宋体";
  myTextFormat.size = 12;
  myTextFormat.leading = 3;
  createTextField("test_txt", 10, 0, 0, 210, 10);
  test_txt.multiline = true;
  test_txt.wordWrap = true;
  test_txt.autoSize = true;
  test_txt.html = true;
  test_txt.htmlText = text;
  test_txt.setTextFormat(myTextFormat);
  test_txt.type = "Static";
// 演示地址：
// http://www.hartech.cn/blog/blogview.asp?logID=45