<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习 调色板</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
.box{
height:200px;
width:200px;
border:1px solid;
background-color:rgba(255,0,0,0);
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
红：<input class="color" min="0" max="255" value="255" type="range"/><br>
绿：<input class="color" min="0" max="255" value="255" type="range"/><br>
蓝：<input class="color" min="0" max="255" value="255" type="range"/><br>
透明：<input class="color" min="1" max="10" value="10" type="range"/><br>
<div class="box"></div>
<script>
$(document).ready(function(e) {
//拖动滑块改变box颜色
$(".color").mousemove(function(){
//更换颜色 rgba(255,255,255,1)
$(".box").css({"background-color":"rgba("+$(".color").eq(0).val()+","+$(".color").eq(1).val()+","+$(".color").eq(2).val()+","+$(".color").eq(3).val()/10+")"});
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习 调色板</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
.box{
height:200px;
width:200px;
border:1px solid;
background-color:rgba(255,0,0,0);
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
红：<input class="color" min="0" max="255" value="255" type="range"/><br>
绿：<input class="color" min="0" max="255" value="255" type="range"/><br>
蓝：<input class="color" min="0" max="255" value="255" type="range"/><br>
透明：<input class="color" min="1" max="10" value="10" type="range"/><br>
<div class="box"></div>
<script>
$(document).ready(function(e) {
//拖动滑块改变box颜色
$(".color").mousemove(function(){
//更换颜色 rgba(255,255,255,1)
$(".box").css({"background-color":"rgba("+$(".color").eq(0).val()+","+$(".color").eq(1).val()+","+$(".color").eq(2).val()+","+$(".color").eq(3).val()/10+")"});
});
});
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
