-1

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

我认为我的 .js 代码应该没问题，仍然是#pageWrap（我的容器）之外的“心脏”动画。怎么了？

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

编辑：实际上我有两个问题，第二个是悬停动作只发生一次，在第一个“悬停动画效果”之后它停止工作。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() {
            });
        }   
*/
4

1 回答 1

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
    });
  });
});
于 2012-10-14T20:35:10.393 回答