透明度

<!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. Objective C 快速入门学习二

    Objective-C 类.对象.方法 1.编写一个复数类: #import <Foundation/Foundation.h>@interface Complex: NSObject / ...

  2. php preg_match($p, $str, $match)方法简介

    方法作用:匹配指定的正则表达式并将结果放在$match数组中 代码示例: $p = '/name:([\\ws]+)/'; $str = "name:steven jobs"; p ...

  3. LUA+resty 搭建验证码服务器

    使用Lua和OpenResty搭建验证码服务器 雨客 2016-04-08 16:38:11 浏览2525 评论0 云数据库Redis版 摘要: Lua下有个Lua-GD图形库,通过简单的Lua语句就 ...

  4. DIV UL LI

    <style type="text/css"> .productDetailTabNav{ width:960px;} .productDetailTabNav ul{ ...

  5. 通过代理连接go01ge

     日本:https://pac.mcplay.cn/jp.pac台湾:https://pac.mcplay.cn/tw.pac如果想上Google可以试试简单的方法,在ie的代理自动配置脚本设置这个p ...

  6. HTML~From

    表单用于向服务器传输数据. http://www.w3school.com.cn/tags/tag_form.asp 文本域(Text fields) 本例演示如何在HTML页面创建文本域.用户可以在 ...

  7. 项目管理工具~Jira

    作用:工程管理 提交BUG 描述,截图,记录BUG ID 自定义DashBoard 添加Gadget 自定义布局 统计要素 TimeSheet 1.组内人力使用分布 2.员工工作量 Jira 过滤器设 ...

  8. 【OpenCV】内存溢出

    今天在写读大量图片时,发现在读到第721张时,内存溢出了,无法继续读.出错语句为pframe2 = cvLoadImage(pname2); 后来加上了ReleaseImage(&pname2 ...

  9. 甲鱼od19篇随笔

    在一个程序里会有多个对话框,这时要准确的判断要找的对话框就比较困难了所以这里就需要借助 1:Resource Hacker工具来准确的定位涉及到的对话框 2:在od中查找指令,然后在所有找到的指令上下 ...

  10. 一次工作中用到的Highcharts.Chart

    一般动态获取图表信息都是通过ajax交互传送数据. 这次是一次性从后台返回集合后,直接在页面取数据绘制图表 引用js <script type="text/javascript&quo ...