-1

だから私はこれを達成したい: http://superdit.com/2010/12/25/moving-element-to-random-position-inside-a-container/

私の .js コードは大丈夫だと思いますが、それでも「ハート」は #pageWrap (私のコンテナー) の外でアニメーション化されます。なにが問題ですか？

私のサイトへのリンク: http://carlpapworth.com/htmlove/fumbling.html

編集:実際には、これには2つの問題があります。2つ目は、最初の「ホバーアニメーション効果」が機能しなくなった後、ホバーアクションが1回しか行われないことです。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

そして、すべてが整ってきます:)

編集：

イベントは 1 回通知されるのonmouseoverではなく、マウスが領域上に移動するたびに処理されますが、コードの最初で最終目的地ポイントを 1 回初期化するだけです。したがって、動いている物体は同じ場所にとどまります。

最後に、次のようにスクリプトを変更する必要があります。

$(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 に答える