如何使用滑块更改图像的不透明度? (HTML)

时间:2014-07-29 05:50:57

标签: javascript jquery html css html5

我知道如何制作幻灯片,但是如何实际链接它以更改图像的不透明度?

如果有人真的帮了我,我真的很感激。我知道你使用jquery但我不知道从哪里开始才能做到这一点。

当我从左向右滑动滑动条时,我需要更改图像不透明度。

3 个答案:

答案 0 :(得分:0)

onChange滑块上,您应该更改元素的CSS样式。

function onChange(var range){
  $("#yourElement").css("opacity", 100/range);
}

您可以在滑块文档中找到此功能的位置。

答案 1 :(得分:0)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(e) {
$("#myrange").change(function(e) {
    $("h1").html(this.value);
    $("img").css("opacity",this.value);
});

});
</script>
</head>
<body>
<input type="range" min="0" max="1" step=".01" value="0" id="myrange"><h1>0</h1>
<img src="PPP.jpg">
</body>
</html>

答案 2 :(得分:0)

<!--You may-->
<html>
  <head>
    <title>YourTestPage-OpacityImage</title>
    <script type="text/javascript">jquery-1.11.1.js</script>
    <script type="text/javascript">ChangeOpacity.js</script>  
   </head>
  <body>
    <div>
      <p><img src="YourImage.jpg" id="YourImage"/></p>
      <input typy="range" name="points" id="points" value="0" min="0" max="100" data-show-value="true">
 </div>
  </body>
</html>

<!--Your script-ChangeOpacity.js-->
$(document).ready(function(){
   $("#points").change(function(){
    var ValuePoint=$("#points").val();
    var Range=ValuePoint/100;
    $("#YourImage").fadeTo("slow",Range);
                                  });
                             });