0 
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(function(){
                $('body').click(function(e){
                    $('div').html(e.pageX +', '+ e.pageY);
                    $('div').animate({
                        left: e.pageX,
                        top: e.pageY
                    });
                }); 
            })
        </script>
        <style>
            html, body{
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }

            body:after {
                content: "."; 
                display: block; 
                clear: both; 
                height: 0; 
                overflow: hidden; 
            }
            div {
                display: block;
                float: left;
                height: 60px;
                left: 262px;
                position: relative;
                top: 48px;
                width: 60px;
                z-index: 24;
                background: red;
            }

            span {
                width: 150px;
                height: 400px;
                display: block;
                background: green;
                position: absolute;
                z-index: 92;
                top: 40px;
                left: 120px;
            }
        </style>
    </head>
    <body>

        <span>&nbsp;</span>
        <div>&nbsp;</div>
    </body>
</html>

JsBIN：http: //jsbin.com/aqiwiz/2/edit

你好再次stackoverflow！

我有div一堵墙（the span）。现在，无论您单击它，div 都会在页面中移动。但问题是我不想让 div 穿过墙壁。我希望它围绕它进行动画处理，并且如果点击墙上什么也不做。

如何使用 javascript/jquery 获得此结果？

4

1 回答 1

0

您需要应用寻路算法。

于 2013-07-09T07:57:24.877 回答