Menu
Anyone, I need help, I got a task from my teacher, it's about jquery, but I've found trouble, perhaps you could help. Case study is as shown below. Points is if I move the mouse pointer on the blue box area, then the object in the red box area come to move to follow the movement of the mouse pointer on the blue box area.
Caption:
1. White box, blue box and red box is the DIV.
2. Red box and blue box is the absolute position in the White Box
3. Blue circle in the blue box represents the mouse pointer is moved.
4. Black circles indicate objects that come to move when the mouse pointer is moved inside the blue box, black circles position must still inside the red box
The following are the results so far I get.
<!DOCTYPE html>
<html>
<head>
<style>
div.moved { position: relative; width:620px; height:620px; top: 10px; background:blue; border:2px groove; margin: 0 auto;}
div.tujuan { position: absolute; width:400px; height:400px; top: 0; left: 0; background:red; border:2px groove; }
div.korban { position: absolute; width:40px; height:40px; top: 0; left: 0; background:white; border:2px groove; }
div.sumber { position: absolute; width:200px; height:200px; bottom:0; right: 0; background:yellow; border:2px groove; cursor: pointer;}
p { margin:0; margin-left:10px; color:red; width:220px;
height:120px; padding-top:70px;
float:left; font-size:14px; }
span { display:block; }
</style>
<script src="jquery-latest.js"></script>
</head>
<body>
<p>
<span>Move the mouse over yellow box.</span>
<span> </span>
</p>
<div class="moved">
<div class="sumber"></div>
<div class="tujuan">
<div class="korban"></div>
</div>
</div>
<script>
$("div.sumber").mousemove(function(e){
var moveX = e.pageX-this.offsetLeft;
var moveY = e.pageY-this.offsetTop;
$("span:first").text(" LEFT : " + moveX + " , TOP : " + moveY);
var korban = $('div.korban').offset();
var moveX2 = e.pageX - korban.left;
var moveY2 = e.pageX - korban.top;
$("span:last").text(" LEFT : " + moveX2 + " , TOP : " + moveY2);
$('div.korban').css({'margin-left' : moveX , 'margin-top' : moveY })
});
</script>
</body>
</html>
540
Is this what you want? I simplified your code a bit
http://jsfiddle.net/P7PBx/8/
$("div.sumber").mousemove(function(e){
var left = e.pageX - $(this).offset().left;
var top = e.pageY - $(this).offset().top;
$('span:first').text(left + ' ' + top);
top*=2; left*=2;
if(top > 360) top = 360;
if(left > 360) left = 360;
$('div.korban').css({
'top':top,
'left':left
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
