JQuery的silder代码

最新推荐文章于 2023-06-20 11:10:06 发布

7ethe

最新推荐文章于 2023-06-20 11:10:06 发布

阅读量516

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lethe0624/article/details/51198903

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果图如下：
这里写图片描述

引用文件如下：

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