利用dom-drag实现flash滚动条功能

在上一篇《一个拖拽的效果类和dom-drag.js浅析》中，我大概介绍了dom-drag的拖拽功能，这次我们用dom-drag来实现flash上比较常用的滚动条效果。效果如下：

实际效果，请狠狠点击这里。

这是实现文字滚动功能的代码，其中需要导入dom-drag类和addEvent类

代码

   
     

    
      
    
      <
    
      script language
    
      =
    
      "
    
      javascript
    
      "
    
      >
    
      

 
    
      //
    
      hDistant,滚动条的可以移动距离,初始位置,x,y是滑块相对父级元素的，即relative
    
      

    
       
    
      var
    
       hDistant
    
      =
    
      ''
    
      ;
 
    
      var
    
       x
    
      =
    
      ''
    
      ;
 
    
      var
    
       y
    
      =
    
      ''
    
      ;
 
    
      //
    
      两个组件
    
      

    
       
    
      var
    
       slider 
    
      =
    
       
    
      ''
    
      ;
 
    
      var
    
       content 
    
      =
    
      ''
    
      ;
 
    
      //
    
      内容的top
    
      

    
       
    
      var
    
       contentTop
    
      =
    
      ''
    
      ;
 
    
      //
    
      缓东效果的计数器
    
      

    
       
    
      var
    
       add
    
      =
    
      0
    
      ;


    
      function
    
       setSlider(){
 slider 
    
      =
    
       id(
    
      "
    
      slider
    
      "
    
      );
 content 
    
      =
    
       id(
    
      "
    
      scrollContent
    
      "
    
      );
 contentTop
    
      =
    
      content.offsetTop;
 x
    
      =
    
      slider.offsetLeft;
 y
    
      =
    
      slider.offsetTop;
 hDistant
    
      =
    
      slider.parentNode.offsetHeight
    
      -
    
      slider.offsetHeight;
 
    
      //
    
      x,y是相对父级元素的，即relative
    
      

    
       Drag.init(slider,
    
      null
    
      ,x,x,y,y
    
      +
    
      hDistant,
    
      false
    
      ,
    
      false
    
      ,
    
      null
    
      ,
    
      null
    
      );
 setInterval(
    
      "
    
      onScroll()
    
      "
    
      ,
    
      30
    
      );
 }

    
      function
    
       id(elem){
 
    
      return
    
       document.getElementById(elem);
 }

    
      //
    
      文字滚动
    
      

    
      function
    
       onScroll(){
 
    
      var
    
       addY
    
      =
    
      (content.offsetHeight
    
      -
    
      id(
    
      "
    
      mask
    
      "
    
      ).offsetHeight)
    
      *
    
      (slider.offsetTop
    
      -
    
      y)
    
      /
    
      hDistant;
    
      

    
       
    
      //
    
      currentY是最终的文本框最终的Y坐标位置
    
      

    
       
    
      var
    
       currentY
    
      =
    
      contentTop
    
      -
    
      addY;
 
    
      //
    
      content.offsetTop每次都会相应减少，
    
      

    
       add
    
      +=
    
      parseInt((currentY
    
      -
    
      content.offsetTop)
    
      *
    
      0.1
    
      );
 content.style.top
    
      =
    
      add
    
      +
    
      "
    
      px
    
      "
    
      ;
 }
window.onload 
    
      =
    
      setSlider;

    
      <
    
      /
    
      script>
   
     

  其中稍为复杂的是缓动的部分：

function onScroll(){
	var addY=(content.offsetHeight-id("mask").offsetHeight)*(slider.offsetTop-y)/hDistant;
	var currentY=contentTop-addY;
	add+=parseInt((currentY-content.offsetTop)*0.1);
	content.style.top=add+"px";
	}

addY是求出滑块移动的距离对应滚动区域移动的距离，currentY则是最终要移动的y坐标，利用add实现缓动。目前测试可以兼容主流的浏览器。

附件：dom-drag和addEvent类

 

《利用dom-drag实现flash滚动条功能》

BY 橡树小屋 FROM http://www.cnblogs.com/babyzone2004/

本文地址：http://www.cnblogs.com/babyzone2004/archive/2010/07/18/1780000.html