标签：
透明度
<!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>
标签：
原文地址：http://www.cnblogs.com/gyz418/p/5365672.html
