用scriptaculous实现slider

最新推荐文章于 2020-01-15 10:39:33 发布

xly_971223

最新推荐文章于 2020-01-15 10:39:33 发布

阅读量123

点赞数

文章标签： CSS JSP HTML

今天做一个播放器的声音控制按钮本想自己用js+css来实现，忽然想起了scriptaculous的特效不如用它来实现
赶紧下载了scriptaculous 网址为：script.aculo.us
解压后把js文件放到自己喜欢的目录，一共有7 8个吧，然后导入你的jsp文件中
[code]<script type="text/javascript" src="scripts/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous/scriptaculous.js"></script>[/code]
开始完成我的slider
scriptaculous要求你的滑动条是两个div嵌套的外层div作为容器里面的div作为滑动手柄如下
[code]<div id="volumetrack" style="border:1px solid red; height:10; width:400;">
<div id="volumehandle" style="border:1px solid yellow; float:left; cursor:hand;"><img src="img/yinliang2.gif" /></div>
</div>[/code]
手柄样式可以根据自己的喜好指定这儿指定的是一张图片<img src="img/yinliang2.gif" />
然后开始写我们的js代码
非常简单一个类就搞定了
[code]function init(){
oSlider = new Control.Slider( 'volumehandle', 'volumetrack',
{
axis:'horizontal',
sliderValue:120,
range:$R(40,240),
minimum:40,
maximum:240,
values:[40,80,120,160,200,240],
onChange:function(v){ alert(v); }
}
);
}[/code]
参数就不用多解释了吧相信都能看懂更多参数去官方网站查询
最后有一句是调用这个init方法的，意思应该是在窗口加载的时候执行init方法
Event.observe(window,'load',init);
ok 一个漂亮的slider就完成了
附完整代码
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>testSlider.html</title>


<script type="text/javascript" src="scripts/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous/scriptaculous.js"></script>
<script language="javascript">
var oSlider = null;
function init(){
oSlider = new Control.Slider( 'volumehandle', 'volumetrack',
{
axis:'horizontal',
sliderValue:120,
range:$R(40,240),
minimum:40,
maximum:240,
values:[40,80,120,160,200,240],
onChange:function(v){ alert(v); }
}
);
}

Event.observe(window,'load',init);
</script>
</head>

<body>
<div id="volumetrack" style="border:1px solid red; height:10; width:400;">
<div id="volumehandle" style="border:1px solid yellow; float:left; cursor:hand;"><img src="img/yinliang2.gif" /></div>
</div>
<br>
</body>
</html>
[/code]