用jquery插件-slider实现滑块的效果
晁璞
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑块的效果</title>
<!--引入jquery类库文件-->
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css样式类库-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.18.custom.css"
/>
<script>
$(document).ready(function(){
$('#slider').slider({
disabled:false, //是否可用，true不可用 false即可用的
animate:true, //代表是采用动画效果
//max:100, //滑块的最大值是100
min:-100, //滑块的最小值
value:0, //滑块的默认值
//orientation:'versvfvtical', //滑块的方向是垂直的还是水平的
horizontal
values:[30,80], //初始化滑块的位置 一个是30 一个是80
range:true,
stop:function(event,ui){ //滑块的范围 执行绑定事件
// alert('停止的时候执行');
}
});
//采用bind绑定的方式执行 event事件
$('#slider').bind('stopslider',function(event,ui){
//alert('开始执行');
});
});
</script>
</head>
<body>
<div>滑块效果</div>
<div id="slider" style="width:300px;"></div>
</body>
</html>
类似资料：