h5 range应用透明度+RGB

最新推荐文章于 2023-02-03 12:08:29 发布

bestlove13141516

最新推荐文章于 2023-02-03 12:08:29 发布

阅读量2k

点赞数

分类专栏： CSS 文章标签： h5 range应用透明度+RGB

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

h5 range应用透明度+RGB

透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $().ready(function () {
            $("#trange").bind('change',function () {
                var val=$("#trange").val();
                $("#txtRangeValue").val(val);    //赋值
//                透明度设置
//                $("#myDiv").get(0).style.filter="alpha("+val+")";
//                $("#myDiv").get(0).style.opacity=val/100;
                $("#myDiv").css({filter:"alpha("+val+")",opacity:val/100});

            })
        });
    </script>
</head>
<body>
<form>
进度条 <input type="range" id="trange" min="0" max="100" step="1" value="100"/><br/>
范围值:<input type="text" id="txtRangeValue" value="100"/><br />
    <div id="myDiv" style="width:200px;height: 200px;background-color: #4cae4c;">透明度</div>
</form>
</body>
</html>

RGB

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
  /*      function $(id){
            return document.getElementById(id);
        }
        window.οnlοad=function(){
            var elems=document.getElementsByTagName("input");
            for(var i=0;i<elems.length;i++){
                elems[i].addEventListener("change",change_color,false);
            }
            function change_color(){
                var r=$("red").value;
                var g=$("green").value;
                var b=$("blue").value;
                $("myDiv").style.backgroundColor="rgb("+r+","+g+","+b+")";
            }
        }
        */
        $().ready(function () {
            $("input").each(function(i,item){
                $(item).bind("change", function () {
                    var r=$("#red").val();
                    var g=$("#green").val();
                    var b=$("#blue").val();
                    $("#myDiv").css("backgroundColor","rgb("+r+","+g+","+b+")");
                })
            });
        });

    </script>
</head>
<body>
<form>
r <input type="range" id="red" min="0" max="100" step="1" value="255"/><br/>
    g <input type="range" id="green" min="0" max="100" step="1" value="255"/><br/>
    b <input type="range" id="blue" min="0" max="100" step="1" value="255"/><br/>

    <div id="myDiv" style="width:200px;height: 200px;background-color: #4cae4c;">透明度</div>
</form>
<p></p>
</body>
</html>