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

最新推荐文章于 2022-03-07 12:58:17 发布

weixin_33973600

最新推荐文章于 2022-03-07 12:58:17 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/babyzone2004/archive/2010/07/18/1780000.html

本文介绍如何使用 DOM-Drag 类库实现类似 Flash 的滚动条效果，通过代码示例展示了文字滚动功能，并讨论了缓动效果的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一篇《一个拖拽的效果类和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

转载于:https://www.cnblogs.com/babyzone2004/archive/2010/07/18/1780000.html