gpt4 book ai didi

jQuery slider 控制不透明度

转载 作者:行者123 更新时间:2023-12-03 22:30:49 24 4
gpt4 key购买 nike

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

有点像this question但有一个 slider 。

我想知道我应该如何最好地实现这一点,因为我有点迷失了我应该如何开始......

我猜函数不是最好的,不是吗?定义一个函数然后为 slider 调用它?

jQuery documentation事实证明,对于这个主题来说, slider 控件对我来说有点太复杂了,但我相信你们中的一些人可以帮助澄清如何让这个事情继续下去!

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

最佳答案

我不确定您希望最终结果是什么,但这是一个控制页面上另一个元素的不透明度的 slider 的简单示例。我已在 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>

关于jQuery slider 控制不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3644226/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com