Bất cứ ai, tôi cần sự giúp đỡ, tôi có một nhiệm vụ từ giáo viên của tôi, đó là về jquery, nhưng tôi đã tìm thấy rắc rối, có lẽ bạn có thể giúp đỡ. Nghiên cứu điển hình như hình dưới đây. Điểm là nếu tôi di chuyển con trỏ chuột trên vùng hộp màu xanh, thì đối tượng trong vùng hộp màu đỏ sẽ di chuyển để theo dõi chuyển động của con trỏ chuột trên vùng hộp màu xanh lam.Di chuyển một đối tượng trong khu vực bên ngoài bằng con trỏ
Chú thích:
1. hộp trắng, hộp màu xanh và hộp màu đỏ là DIV.
2. Hộp màu đỏ và hộp màu xanh dương là vị trí tuyệt đối trong Hộp màu trắng
3. Vòng tròn màu xanh lam trong hộp màu xanh biểu thị con trỏ chuột được di chuyển.
4. Vòng tròn màu đen biểu thị các vật thể di chuyển khi di chuyển con trỏ bên trong hộp màu xanh, vị trí vòng tròn màu đen phải nằm trong hộp màu đỏ
Sau đây là kết quả mà tôi nhận được.
<!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>
này có thể giúp http://jsfiddle.net/elclanrs/jF27b/ – elclanrs