开发学院图形图像Flash 超酷滚动公式实现自定义滚动条 阅读

超酷滚动公式实现自定义滚动条

 2007-01-04 10:57:59 来源:WEB开发网   
核心提示: (3)选中actionscript层的第1帧,在这个布局上添写代码,超酷滚动公式实现自定义滚动条(5),依照公式的原理,你可以试一下在了解了公式的情况下是否可以独立完成它,这里面最为关键的是公式的应用,也就是updateContentPos(),代码如下:代码:function scrol

(3)选中actionscript层的第1帧,在这个布局上添写代码,依照公式的原理,你可以试一下在了解了公式的情况下是否可以独立完成它。

代码如下:

代码:

function scrolling (){
  //滚动速度
  var moveSpeed = 1;
  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._y = Math.round(top_scroll -(scrollable * percent_scrolled));
  }
  //拖动滑块
  dragger.onPress = function(){
    startDrag(this,false,left,top,right,bottom);
    this.onMouseMove = function(){
      updateContentPos();
    }
  }
  dragger.onRelease = 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();
}
//调用函数
scrolling();

虽然看到上面这么长的代码,但是并不需要担心,因为大部分都是我们常见的简单的功能代码,这里面最为关键的是公式的应用,也就是updateContentPos()。整段代码在做的事情无非就是不断地更新updateContentPos()。

上一页  1 2 3 4 5 6 7 8  下一页

Tags:超酷 滚动 公式

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接