AS3做的聊天窗口滚动条，支持鼠标

最近需要用到这个，做了个，结果才一天，换界面，又做，我汗……

做的不是很完善，最起码，滚动条不会随着文字变多而变短！

主要实现的是：鼠标点、拉、拖、滚，聊天内容窗口的随动，发送消息后，实现类是QQ聊天窗口的样子！

介绍下下面的名字，代码片段，自己组织，如果是CS3上，可直接用，Flex需要导包：

btndown：向下的箭头按钮 |  btnup：……

btnSend：发送按钮（MC）|  txt：输入文本框

contentMain：聊天信息显示文本框  |  contentMask：遮罩

dragger：可以移动的那个  |  scrollbg：滚动条背景

注：下面的56为——滚动条背景高度-滚动条高度

17为一行文字高度

99为聊天记录文本框高度，27为起始位置

 

代码

btndown.addEventListener(MouseEvent.MOUSE_DOWN,goDown);
btnup.addEventListener(MouseEvent.MOUSE_DOWN,goUp);
btnSend.addEventListener(MouseEvent.CLICK,sendMsg);

contentMain.mask  =  contentMask;


setTimeout(goIndex, 500 );
function  goIndex(){
 contentMain.y  =   27 ;
 contentMain.border  =   false ;
}
function  goDown(e:MouseEvent): void {
  if (dragger.y  <   99 ){
  contentMain.y = (contentMain.y - 17 );
  changeCoordinates( true );
 }
}
function  goUp(e:MouseEvent): void {
  if (contentMain.y  !=   27 ){
  contentMain.y = (contentMain.y + 17 );
  changeCoordinates( false );
 }
}
// 200px;line = 20;
for ( var  i: int  ; i < 20 ;i ++ ){
 contentMain.htmlText  +=  i + " aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br> " ;
  if (i <= 12 ){
  contentMain.height += 17 ;
 }
}

contentMain.height += 17 ;
initScroll();
function  initScroll(): void {
  if (contentMain.height  ==   154 ){
   this .dragger.visible  =   false ;
 } else {
   this .dragger.visible  =   true ;
   // this.dragger.y  = 43;
 }
}

function  sendMsg(e:MouseEvent): void {
  if (txt.text  !=   "" ){
  initScroll();
   if (contentMain.text  ==   "" ){
   contentMain.htmlText  +=  txt.text + " <br> " ;
  } else {
    if (contentMain.htmlText.split( " < " ).length  <   37 ){
    contentMain.htmlText  +=  txt.text + " <br> " ;
   } else {
    contentMain.htmlText  +=  txt.text + " <br> " ;

    contentMain.height  +=   17 ;

    contentMain.y  =   27 - (contentMain.height  -   127 ); 
     // contentMain.y = 27-(contentMain.height - 127)-17; 
     this .dragger.y   =   99 ;
   }
  }
  
 }
}

txt.addEventListener(KeyboardEvent.KEY_DOWN,callEnter);
function  callEnter(evt:KeyboardEvent): void {
  if  (evt.keyCode  ==  Keyboard.ENTER){
     sendMsg( null );
 }
}

// scroll bar height = 40
// ------------------------------------------------------------------------------
// 中间滚轮监测。
addEventListener(MouseEvent.MOUSE_WHEEL,mouseWheel);

// 中滚轮。
function  mouseWheel(e:MouseEvent) {
  var  _delta: int = e.delta;
  if  (_delta > 0 ) {
   // 滚轮正在往前滚动。
  goUp( null );
 }  else  {
   // 滚轮正在往后滚动。
  goDown( null );
 }
}

// 更改坐标
function  changeCoordinates(bl:Boolean): void {
  // 可滚动距离     trace(scrollbg.height-dragger.height);
  // 可移动距离     contentMain.height-contentMask.height;
  // 每次移动17，移动百分比为
  if (bl){
  dragger.y  +=   56 * ( 17 / (contentMain.height-contentMask.height));
   
 } else {
  dragger.y  -=   56 * ( 17 / (contentMain.height-contentMask.height));
 }
}

// -------------------------------------------------------------------
dragger.addEventListener(MouseEvent.MOUSE_DOWN,draggerDown);
function  draggerDown(e:MouseEvent): void {
 dragger.addEventListener(MouseEvent.MOUSE_MOVE,updateContent);
}

function  updateContent(e:MouseEvent): void {
  // ------------------------------↓x, -------↓y, ------↓width, ↓height
  var  rect:Rectangle = new  Rectangle(scrollbg.x,scrollbg.y, 0 ,scrollbg.height  -  dragger.height - 1 );
 dragger.startDrag( false ,rect);
  // 42-98    56
  // trace(dragger.y);
  // trace(Math.round(dragger.y-42)+"--------------移动距离");
 contentMove(Math.round(dragger.y - 42 ));

}

dragger.addEventListener(MouseEvent.MOUSE_UP,draggerOut);
addEventListener(MouseEvent.MOUSE_UP,draggerOut);
function  draggerOut(e:MouseEvent): void {
 dragger.stopDrag();
 dragger.removeEventListener(MouseEvent.MOUSE_MOVE,updateContent);
 contentMove(Math.round(dragger.y - 42 ));
}

// 文本框的文字移动
function  contentMove(num:Number): void {
  // 算出移动百分比距离
  // --------------↓原始坐标
  // ------------------------↓可移动区域------------------------------------↓移动百分比
 contentMain.y  =   27 - (contentMain.height - contentMask.height) * num / (scrollbg.height - dragger.height-1);
}

 

 

 

 

 

 

转自：http://fashionwll.blog.163.com/blog/static/82550177200931493447219/