<html>
<body>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<style type="text/css">
#pointer {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border:#000 1px solid;
border-radius:50%;
}
.circular-div{padding:20px;width:25px;height:200px;float:left;margin:1px;}
#aqua{background:aqua;}
#yellow{background:yellow;}
#bisque{background:bisque;}
#aquamarine{background:aquamarine;}
#target{float:left;padding:20px;height:200px;width:250px;border:#F0F0F0 1px solid;}
</style>
<div id="demo-content">
<div class="circular-div" id="aquamarine" onClick="pickColor(this.id);">
</div>
<div class="circular-div" id="bisque" onClick="pickColor(this.id);">
</div>
<div class="circular-div" id="yellow" onClick="pickColor(this.id);">
</div>
<div class="circular-div" id="aqua" onClick="pickColor(this.id);">
</div>
<div id="target" onClick="applyColor();">Click to Apply Color</div>
<div id="pointer"></div>
</div>
<script type="text/javascript">
var demoContent = document.getElementById("demo-content");
demoContent.addEventListener('mousemove',function(event) {
$("#pointer").css({'top':event.pageY+'px','left':event.pageX+'px'});
});
function applyColor(){
$("#target").css('background-color',$("#pointer").css('background-color'));
}
function pickColor(id){
$("#pointer").css('background-color',id);
}
</script>
</body>
</html>
<body>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<style type="text/css">
#pointer {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border:#000 1px solid;
border-radius:50%;
}
.circular-div{padding:20px;width:25px;height:200px;float:left;margin:1px;}
#aqua{background:aqua;}
#yellow{background:yellow;}
#bisque{background:bisque;}
#aquamarine{background:aquamarine;}
#target{float:left;padding:20px;height:200px;width:250px;border:#F0F0F0 1px solid;}
</style>
<div id="demo-content">
<div class="circular-div" id="aquamarine" onClick="pickColor(this.id);">
</div>
<div class="circular-div" id="bisque" onClick="pickColor(this.id);">
</div>
<div class="circular-div" id="yellow" onClick="pickColor(this.id);">
</div>
<div class="circular-div" id="aqua" onClick="pickColor(this.id);">
</div>
<div id="target" onClick="applyColor();">Click to Apply Color</div>
<div id="pointer"></div>
</div>
<script type="text/javascript">
var demoContent = document.getElementById("demo-content");
demoContent.addEventListener('mousemove',function(event) {
$("#pointer").css({'top':event.pageY+'px','left':event.pageX+'px'});
});
function applyColor(){
$("#target").css('background-color',$("#pointer").css('background-color'));
}
function pickColor(id){
$("#pointer").css('background-color',id);
}
</script>
</body>
</html>
No comments:
Post a Comment