当前位置：文江博客话题详情

jQuery 滑块控制不透明度

发布于 2024-09-18 06:54:20 字数 461 浏览 4 评论 0原文

我正在尝试实现一个 jQuery 滑块控件来控制网页上某个元素的不透明度。

有点像这个问题但带有滑块。

我想知道我应该如何最好地实现这个，因为我对应该如何开始有点迷失......

我猜函数不会是最好的，不是吗？定义一个函数然后为滑块调用它？

滑块控件的 jQuery 文档对我来说有点太复杂了对于这个主题，但我相信你们中的一些人可以帮助澄清如何让这个事情继续下去！

抱歉，这个问题有点模糊，但我不太确定如何继续。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

枕花眠 2024-09-25 06:54:24

这是一个很好的代码示例，但我对上面的代码进行了一些修改，滑块现在在开始滑动时立即更改不透明度，并且不透明度变化更加平滑。

滑块

<script type="text/javascript">
    $(document).ready(function() {
        //Step 1: set up the slider with some options. The valid values for opacity are 0 to 1
        //Step 2: Bind an event so when you slide the slider and stop, the following function gets called
        $('#slider').slider({ 
        min: 0, 
        max: 1, 
        step: 0.01, 
        value: 1,
        orientation: "vertical",
             slide: function(e,ui){
                     $('#box').css('opacity', ui.value)

             }                
        })
    });
</script>
<style type="text/css">
    #box { width: 200px; height: 200px; background-color: #ff0000; }
    #slider { width: 15px; }
</style>

使用上面的滑块淡入淡出...

It's a nice code example but I revised the above code al little bit, the slider now changes the opacity immediately when start sliding and the opacity changes more smooth.`

Slider

<script type="text/javascript">
    $(document).ready(function() {
        //Step 1: set up the slider with some options. The valid values for opacity are 0 to 1
        //Step 2: Bind an event so when you slide the slider and stop, the following function gets called
        $('#slider').slider({ 
        min: 0, 
        max: 1, 
        step: 0.01, 
        value: 1,
        orientation: "vertical",
             slide: function(e,ui){
                     $('#box').css('opacity', ui.value)

             }                
        })
    });
</script>
<style type="text/css">
    #box { width: 200px; height: 200px; background-color: #ff0000; }
    #slider { width: 15px; }
</style>

Fade with the above slider...

回复收藏 0 原文

往事风中埋 2024-09-25 06:54:23

我不确定您到底希望最终结果是什么，但这是一个控制页面上另一个元素的不透明度的滑块的简单示例。我已在 Javascript 中添加了相关部分的注释。

<!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>
    <title>Slider</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/>

    <script type="text/javascript">
        $(document).ready(function() {
            //Step 1: set up the slider with some options. The valid values for opacity are 0 to 1
            //Step 2: Bind an event so when you slide the slider and stop, the following function gets called
            $('#slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
                .bind("slidechange", function() {
                    //get the value of the slider with this call
                    var o = $(this).slider('value');
                    //here I am just specifying the element to change with a "made up" attribute (but don't worry, this is in the HTML specs and supported by all browsers).
                    var e = '#' + $(this).attr('data-wjs-element');
                    $(e).css('opacity', o)
                });
        });
    </script>
    <style type="text/css">
        #box { width: 200px; height: 200px; background-color: #ff0000; }
        #slider { width: 200px; }
    </style>
</head>
<body>
    <div id="slider" data-wjs-element="box"></div>
    <div id="box">
        <p>Fade with the above slider...</p>
    </div>
</body>
</html>

I'm not sure exactly what you would like your end result to be, but here is a simple example of a slider controlling the opacity of another element on the page. I've included comments in my Javascript for the relevant parts.

<!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>
    <title>Slider</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/>

    <script type="text/javascript">
        $(document).ready(function() {
            //Step 1: set up the slider with some options. The valid values for opacity are 0 to 1
            //Step 2: Bind an event so when you slide the slider and stop, the following function gets called
            $('#slider').slider({ min: 0, max: 1, step: 0.1, value: 1 })
                .bind("slidechange", function() {
                    //get the value of the slider with this call
                    var o = $(this).slider('value');
                    //here I am just specifying the element to change with a "made up" attribute (but don't worry, this is in the HTML specs and supported by all browsers).
                    var e = '#' + $(this).attr('data-wjs-element');
                    $(e).css('opacity', o)
                });
        });
    </script>
    <style type="text/css">
        #box { width: 200px; height: 200px; background-color: #ff0000; }
        #slider { width: 200px; }
    </style>
</head>
<body>
    <div id="slider" data-wjs-element="box"></div>
    <div id="box">
        <p>Fade with the above slider...</p>
    </div>
</body>
</html>

回复收藏 0 原文

~没有更多了~