Question

所以我想实现这个目标： http://superdit.com/2010/12/25/moving-element-to-random-position-inside-a-container/

我认为我的.js代码应该没问题，仍然是＆＃34; heart＆＃34;在#pageWrap（我的容器）之外设置动画。有什么问题？

链接到我的网站：http://carlpapworth.com/htmlove/fumbling.html

编辑：其实我有2个问题，第二个是悬停动作只发生一次，在第一次＆＃34;悬停动画效果后＃34;它停止工作。 PLZ帮助：）

HTML：

<body>
<header>

<div id="headerTitle"><a href="index.html">&lt;html<span class="heart">&hearts;</span>ve&gt;</a>
            </div>
            <div id="help">
                <h2>?</h2>
                <div id="helpInfo">
                    <p>The name of the puzzle should lead u to success!</p>
                </div>
            </div>
        </header>
    <div id="reward">
        <div id="rewardContainer">
            <div id="rewardBG" class="heart">&hearts;
            </div>
            <p>OMG, this must be luv<br><a href="index.html" class="exit">x</a></p>
        </div>
    </div>  
    <div id="pageWrap">
        <div id="goal">
            <a href="#reward" class="heart">&hearts;</a>
        </div>  
    </div> <!-- END Page Wrap -->
    <footer>
        <div class="heartCollection">
            <p>collect us if u need luv:<p>
            <ul>
                <li><a id="collection1">&hearts;</a></li>
                <li><a id="collection2">&hearts;</a></li>
                <li><a id="collection3">&hearts;</a></li>
                <li><a id="collection4">&hearts;</a></li>
                <li><a id="collection5">&hearts;</a></li>
                <li><a id="collection6">&hearts;</a></li>
            </ul>
        </div>
        <div class="credits">with love from Popm0uth ©2012</div>
    </footer>

</body>

的CSS

body{
    overflow: hidden;
    }


#pageWrap{
padding: 20px 20px 100px 20px;
position: relative;
width: 100%;
height: 700px;
text-align: center;
display: block;
}

header{
position: fixed;
width: 100%;
height: 60px;
margin: 0 auto;
left: 0px;
background: url(../images/bg.png) solid;
z-index: 2000;
display: block;
}

#goal{
position: relative;
width: 100px;
height: 100px;
left: 50%;
top: 25%;
margin-left: -100px;
padding: 30px;
display: block;
}

a.heart{
font-size: 80px;
text-align: center;
display: block;
}

footer{
position: fixed;
bottom: 0px;
padding: 10px; 
width: 100%;
height: 100px;
background: /*url(../images/bgFooter.png)*/ #dddddd;
z-index: 2000;
}

JS：

$(document).ready(function() {
function randomFromTo(from, to){
            return Math.floor(Math.random() * (to - from + 1) + from);
}

            /* get container position and size
             * -- access method : cPos.top and cPos.left */
            var cPos = $('#pageWrap').offset();
            var cHeight = $(window).height() - $('header').height() - $('footer').height();
            var cWidth = $(window).width() - $('header').width() - $('footer').width(); 

            // get box padding (assume all padding have same value)
            var pad = parseInt($('#goal').css('padding-top').replace('px', ''));

            // get movable box size
            var bHeight = $('#goal').height();
            var bWidth = $('#goal').width();

            // set maximum position
            maxY = cPos.top + cHeight - bHeight - pad;
            maxX = cPos.left + cWidth - bWidth - pad;

            // set minimum position
            minY = cPos.top + pad;
            minX = cPos.left + pad;

            // set new position         
            newY = randomFromTo(minY, maxY);
            newX = randomFromTo(minX, maxX);


        $('#goal').mouseenter(function() {
            $(this).stop(true,true).animate({
                left: newY,
                top: newX
                });
        });
});








    /*
    function randomFromTo(from, to){
            return Math.floor(Math.random() * (to - from + 1) + from);
        }

    function moveRandom {
            /* get container position and size
             * -- access method : cPos.top and cPos.left
            var cPos = $('#pageWrap').offset();
            var cHeight = $('#pageWrap').height();
            var cWidth = $('#pageWrap').width();

            // get box padding (assume all padding have same value)
            var pad = parseInt($('#pageWrap').css('padding-top').replace('px', ''));

            // get movable box size
            var bHeight = $('#goal').height();
            var bWidth = $('#goal'+id).width();

            // set maximum position
            maxY = cPos.top + cHeight - bHeight - pad;
            maxX = cPos.left + cWidth - bWidth - pad;

            // set minimum position
            minY = cPos.top + pad;
            minX = cPos.left + pad;

            // set new position         
            newY = randomFromTo(minY, maxY);
            newX = randomFromTo(minX, maxX);

            $('#goal').animate({
                top: newY,
                left: newX
                }, 500, function() {
            });
        }   
*/

Answer 1

您不必指定#pageWrap高度和宽度。您必须根据窗口大小计算它。

替换它：

var cHeight = $('#pageWrap').height();
var cWidth = $('#pageWrap').width();

与此：

var cHeight = $(window).height() - $('header').height() - $('footer').height();
var cWidth = $(window).width() - $('header').width() - $('footer').width();

你不觉得这里有什么奇怪的东西吗？

left: newY, 
top: newX

应该是

left: newX, 
top: newY

一切都会到位：）

编辑：

onmouseover事件没有发出一次信号，每当鼠标悬停在该区域时就会被处理，但您只需在代码开始时初始化最终目标点一次。所以移动物体停留在同一个地方。

最后你应该修改你的脚本如下：

$(document).ready(function() {

  function randomFromTo(from, to){
     return Math.floor(Math.random() * (to - from + 1) + from);
  }

  $('#goal').mouseenter(function() {

    var cPos = $('#pageWrap').offset();
    var cHeight = $(window).height() - $('header').height() - $('footer').height();
    var cWidth = $(window).width();

    // get box padding (assume all padding have same value)
    var pad = parseInt($('#goal').css('padding-top').replace('px', ''));

    // get movable box size
    var bHeight = $('#goal').height();
    var bWidth = $('#goal').width();

    // set maximum position
    maxY = cHeight - bHeight - pad;
    maxX = cWidth - bWidth - pad;

    // set minimum position
    minY = cPos.top + pad;
    minX = cPos.left + pad;

    // set new position
    newY = randomFromTo(minY, maxY);
    newX = randomFromTo(minX, maxX);


    $(this).animate({
            left: newX,
            top: newY
    });
  });
});

在DIV中的随机位置，而不是jQuery

1 个答案: