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

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

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

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

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

您不必指定 #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
    });
  });
});

相关内容

最新更新

热门标签：