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


阅读更多
上一篇jquery-dialog对话框的实现
下一篇jquery-animate-imagescroll 图片滚动
想对作者说点什么? 我来说一句

用C#实现封装

-

学院

1970年01月01日 08:00

没有更多推荐了,返回首页

不良信息举报

用jquery插件-slider实现滑块的效果

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭