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.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的更多相关文章
- [H5]range对象的createRange方法
range对象的extractContents()方法: extractContents() 方法删除文档内容,并以 DocumentFragment 对象的形式返回它; DocumentFragme ...
- [H5]range对象的clone方法
clone:range对象的克隆; <body> <p id="p">这是一段文字</p> <button onclick="b ...
- [H5]range对象的setStart/setEnd方法
1.setStart:表示某个节点的range对象的起点位置;2.setEnd:表示某个节点的range对象的结束位置; 示例如下:<body> <div id="div& ...
- [H5]range对象之selectNode等方法
关于range对象的selectNodeContents.selectNode.deleteContents方法 示例代码如下: <!DOCTYPE html> <html lang ...
- [工作积累] shadow map问题汇总
1.基本问题和相关 Common Techniques to Improve Shadow Depth Maps: https://msdn.microsoft.com/en-us/library/w ...
- HTML＆CSS日常知识点总结
HTML 标签 meta 标签永远位于文档的头部,即head元素内部 可提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词 charset 这个属性规定在外部脚本文件中使用的字符编码 如果外 ...
- IOS修改webView背景透明以及IOS调用前台js的方法
工作上遇到IOS的webView中的H5页面需要透明以显示webView的背景颜色.用H5自身的透明度的css样式或者js控制背景颜色及透明度都打不到想要的效果,最后还是通过ios设置webView中 ...
- Cocos2d-x 3.2 学习笔记（六）Layer
Layer 游戏中的背景容器,Layer类是Node类的一个子类,它实现了触屏事件代理(TouchEventsDelegate)协议. LayerColor是Layer的一个子类,它实现了RGBAPr ...
- Unity全屏模糊
先上效果,左边模糊 其实用的是Unity Stard Effect里的资源,一个脚本一个shader //脚本代码 using UnityEngine; using System.Collection ...
随机推荐
- ndk学习6: 使用gdb调试ndk程序一
生成debug版程序 方法一: 使用ndk-build编译时,加上如下参数NDK_DEBUG=1,之后生成so文件之外,还会生成gdbobserver,gdb.setup调式文件 方法二: 修改A ...
- ubuntu彻底卸载mysql
1.删除mysql sudo apt-get autoremove --purge mysql-server-5.0 sudo apt-get remove mysql-server sudo apt ...
- ADO.NET中的五个主要对象
Connection:主要是开启程序和数据库之间的连接.没有利用连接对象将数据库打开,是无法从数据库中取得数据的.Close和Dispose的区别,Close以后还可以Open,Dispose以后则不 ...
- 一个很详细的web.xml讲解
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "- ...
- centos查找未挂载磁盘格式化并挂载
查看当前linux服务器分区 df -h 查看当前linux服务器硬盘: fdisk -l /dev/sda 第一块硬盘 /dev/sdb 第二块硬盘 依此类推 以/dev/sdb为新增硬盘为 ...
- java mail api 使用
所需要的jar包: http://pan.baidu.com/s/1qWGZRJm 如果遇到这个错误:在windows防火墙允许 javaw.exe访问网络.或者关闭防火墙 FATAL ERROR i ...
- 9.nodejs权威指南--Socket.IO
1. Socket.IO 1.1 服务器 var http = require('http'); var sio = require('socket.io'); var fs = require('f ...
- nyoj739_笨蛋难题四
笨蛋难题四 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 这些日子笨蛋一直研究股票,经过调研,终于发现xxx公司股票规律,更可喜的是 笨蛋推算出这家公司每天的股价, ...
- asp.net mvc5 伪静态 WebForm
Mvc4和5通用 1.背景:老项目WebForm开发 需要 融合到新项目Mvc5开发 2.需求:Url地址TruckDetail.aspx?id=455 达到效果 truck/455.html 3.不 ...
- 【OpenCV】内存溢出
今天在写读大量图片时,发现在读到第721张时,内存溢出了,无法继续读.出错语句为pframe2 = cvLoadImage(pname2); 后来加上了ReleaseImage(&pname2 ...