使用指针移动外部区域中的对象
任何人,我需要帮助,我从老师那里得到了一个任务,这是关于jquery,但我遇到了麻烦,也许你可以帮忙.案例研究如下所示.点是如果我将鼠标指针移动到蓝色框区域,则红色框区域中的对象将移动以跟随鼠标指针在蓝色框区域上的移动.
文字说明:
1.白盒,蓝盒和红盒是DIV.
2.红框和蓝框是白盒
3 中的绝对位置.蓝框中的蓝圈表示鼠标指针被移动.
4.黑色圆圈表示当鼠标指针移动到蓝色框内时移动的对象,黑色圆圈位置仍必须位于红色框内
以下是我得到的结果.
<!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\n\n\n$("div.sumber").mousemove(function(e){\n var left = e.pageX - $(this).offset().left;\n var top = e.pageY - $(this).offset().top; \n $(\'span:first\').text(left + \' \' + top);\n\n top*=2; left*=2;\n if(top > 360) top = 360;\n if(left > 360) left = 360;\n $(\'div.korban\').css({\n \'top\':top,\n \'left\':left\n }); \n});\xe2\x80\x8b\n