透明度

<!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.onload=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>

h5 range应用 透明度+RGB的更多相关文章

  1. [H5]range对象的createRange方法

    range对象的extractContents()方法: extractContents() 方法删除文档内容,并以 DocumentFragment 对象的形式返回它; DocumentFragme ...

  2. [H5]range对象的clone方法

    clone:range对象的克隆; <body> <p id="p">这是一段文字</p> <button onclick="b ...

  3. [H5]range对象的setStart/setEnd方法

    1.setStart:表示某个节点的range对象的起点位置;2.setEnd:表示某个节点的range对象的结束位置; 示例如下:<body> <div id="div& ...

  4. [H5]range对象之selectNode等方法

    关于range对象的selectNodeContents.selectNode.deleteContents方法 示例代码如下: <!DOCTYPE html> <html lang ...

  5. [工作积累] shadow map问题汇总

    1.基本问题和相关 Common Techniques to Improve Shadow Depth Maps: https://msdn.microsoft.com/en-us/library/w ...

  6. HTML＆CSS日常知识点总结

    HTML 标签 meta 标签永远位于文档的头部,即head元素内部 可提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词 charset 这个属性规定在外部脚本文件中使用的字符编码 如果外 ...

  7. IOS修改webView背景透明以及IOS调用前台js的方法

    工作上遇到IOS的webView中的H5页面需要透明以显示webView的背景颜色.用H5自身的透明度的css样式或者js控制背景颜色及透明度都打不到想要的效果,最后还是通过ios设置webView中 ...

  8. Cocos2d-x 3.2 学习笔记（六）Layer

    Layer 游戏中的背景容器,Layer类是Node类的一个子类,它实现了触屏事件代理(TouchEventsDelegate)协议. LayerColor是Layer的一个子类,它实现了RGBAPr ...

  9. Unity全屏模糊

    先上效果,左边模糊 其实用的是Unity Stard Effect里的资源,一个脚本一个shader //脚本代码 using UnityEngine; using System.Collection ...

随机推荐

  1. dtw算法优化(重写C语言版本)

    1.缩小搜索范围 2.降低内存消耗

  2. IIS 处理请求 原理

    有时候我们会发现当我们访问一个IIS网站时,使用网址可以正常访问,但是使用IP却不行,这是什么原因呢? 原来IIS可以使用一个IP地址和端口绑定多个网站,这些网站的IP地址与端口都一样,因此在客户端或 ...

  3. JavaScript——exec和match

    题目17:Read the following javascript code: var someText="web2.0 .net2.0";var pattern=/(\w+)( ...

  4. FileUpload1上传控件

    <asp:FileUpload ID="FileUpload1" runat="server" /> string fn = System.IO.P ...

  5. python操作Excel文件

    参考: http://www.cnblogs.com/tianyajuanke/p/4048844.html http://blog.chinaunix.net/uid-24701781-id-334 ...

  6. qq开放平台测试

    2015年3月10日 11:29:56 QQ API对一些链接的curl请求时, 有https, 所以需要安装openssl:  Linux上要安装openssl #yum -y install op ...

  7. VS2010调试速度很慢

    1.使用vs2010,感觉速度越来越慢.重新设置了vs2010的环境(在vs2010命令提示符下,执行devenv.exe /resetuserdata),居然解决了这个问题,速度跑的很好.网上有人说 ...

  8. reportng的使用

    1.首先安装testng 2.下载reportng jar包 http://pan.baidu.com/s/1i3KdlQH 3.添加到project build path 注意:需要同时引入goog ...

  9. jquery after append appendTo三个函数的区别

    jq文档的说明是 1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html> & ...

  10. 【python】入门学习（十）

    #入门学习系列的内容均是在学习<Python编程入门(第3版)>时的学习笔记 统计一个文本文档的信息,并输出出现频率最高的10个单词 #text.py #保留的字符 keep = {'a' ...