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/