您的位置：首页 > Web前端 > JQuery

JQuery的silder代码

2016-04-20 10:57 656 查看

效果图如下：

引用文件如下：

<link rel="stylesheet" href="siderJS/jquery.ui.all.css">
<script src="siderJS/jquery-1.7.1.js"></script>
<script src="siderJS/jquery.ui.core.js"></script>
<script src="siderJS/jquery.ui.widget.js"></script>
<script src="siderJS/jquery.ui.mouse.js"></script>
<script src="siderJS/jquery.ui.slider.js"></script>

Js代码如下：

<script>
$(function() {
$( "#slider" ).slider({
value:0,
min: 0,
max: 500,
step: 10,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>

html代码如下：

<body>

<div class="demo" style="border:1px solid red; width:500px;height:200px">

<p>
<label for="amount">图层透明度:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider"></div>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航