透明度

<!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. [转]Python的ASCII, GB2312, Unicode , UTF-8

    2007-12-13 10:50:47|  分类: Python实用软件编|举报|字号 订阅     ASCII 是一种字符集,包括大小写的英文字母.数字.控制字符等,它用一个字节表示,范围是 0-1 ...

  2. django 实战 - eLeave Form

    需求: 实现请假单的电子审批 1. 支持国际化 2. 支持模型级别的访问记录 here we go: 这里会写一系列的文章,来记录我实战的过程,由于接触django没多久,难免有疏漏之处,望拍砖不要太 ...

  3. 谷歌Chrome浏览器开发者工具的基础功能

    上一篇我们学习了谷歌Chrome浏览器开发者工具的基础功能,下面介绍的是Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要 ...

  4. css常用代码

    透明度: filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; 英文大小写: div{text-transform:capitalize|U ...

  5. window.navigate 与 window.location.href 的使用区别介绍

    window.navigate(sURL)方法是针对IE的,不适用于FF,在HTML DOM Window Object中,根本没有列出window.navigate方法. 要在javascript中 ...

  6. （转）Xcode调试技巧

    转自http://www.apkbus.com/android-140340-1-1.html 这篇文章给大家带来的是一些Xcode实用技巧,比如: • 摆脱NSlog打印输出,使用断点日志. • 摆 ...

  7. Core Data 多线程时多个context使用

    原文地址:http://blog.csdn.net/willmomo/article/details/19759413 写的非常好!我这里截取一点重要的,备份,请去原地址阅读! 本人去年10月份才接触 ...

  8. 推荐一篇 OAuth 2.0 必读文章

    http://www.cnblogs.com/artech/p/oauth-03.html 共计有3篇相关内容,请仔细阅读! 再说一下我用box api 开发时的问题,在 box 程序登记页面: 对于 ...

  9. ECharts分析xdebug跟踪日志

    2015年12月23日 15:36:11 星期三 之前用的是国外的图表工具, 有点麻烦, 文档是英文的, 看着不顺眼, 发现了百度出品的ECharts, 文档比较全, 功能比较多, 做出的图也比较好看 ...

  10. UrlEncoder url编码

    public static string PercentEncode(string s)        {            var bytes = Encoding.UTF8.GetBytes( ...