jquery調色盤案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
*{margin:0;padding:0;}
.color_disk{
width: 230px;
height: 500px;
border:1px solid red;
margin:100px auto;
padding-left: 20px;
}
.color_disk .box{
width: 205px;
height: 25px;
margin-top: 10px;
position: relative;
background: red;
border:1px solid gray;
}
.color_disk .box .gilde{
width: 5px;
height: 25px;
background-color: rgba(255,255,255,0.7);
position: absolute;
top: 0;
left: 0;
border-radius: 30%;
}
#color_red{ background-color: red; }
#color_green{ background-color: green; }
#color_blue{ background-color: blue; }
.color_disk .disk_top{
width: 100%;
overflow: hidden;
}
.color_disk .disk_bottom{
width: 100%;
height: 260px;
position: relative;
}
.color_disk .disk_bottom #show_color{
width: 200px;
height: 200px;
border: 1px solid #333;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="color_disk">
<div class="disk_top">
<div class="box" id="color_red">
<div class="gilde"></div>
</div>
<div>
<span>R : </span>
<span id="red_count">0</span>
</div>
<div class="box" id="color_green">
<div class="gilde"></div>
</div>
<div>
<span>G : </span>
<span id="green_count">0</span>
</div>
<div class="box" id="color_blue">
<div class="gilde"></div>
</div>
<div>
<span>B : </span>
<span id="blue_count">0</span>
</div>
</div>
<div class="disk_bottom">
<div id="show_color"></div>
</div>
</div>
<script>
//拖動
var bli = (parseInt($('.box').css('width'))-5)/255;
var disX = 0;
var disY = 0;
$('.gilde').mousedown(function(e){
var gdX = e.clientX - $(this).offset().left;
$(this).parent('.box').mousemove(function(e){
var disX = e.clientX - $(this).offset().left - gdX;
console.log(disX)
console.log()
if(disX<5){
disX=0
}else if(disX>=200){
disX=200;
}
console.log(disX)
$(this).children().css({left:disX});
$(this).next().children().eq(1).html(Math.floor(disX/bli))
var r = parseInt(red_count.innerHTML);
var g = parseInt(green_count.innerHTML);
var b = parseInt(blue_count.innerHTML);
$('#show_color').css("background","rgb("+r+","+g+","+b+")")
})
$(this).parent('.box').mouseup(function() {
$(this).off();
});
})
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章