利用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