他のdivに飛んでいるdiv（ページ全体ではない）

他のdivのdivの移動を希望します。今、彼らはページ全体を飛んでいる。他のdivに飛んでいるdiv（ページ全体ではない）

このコードを変更するにはどうすればよいですか？

$(document).ready(function() { 
 
    $('.balloon').each(animateDiv); 
 
}); 
 

 
function makeNewPosition() { 
 

 
    // Get viewport dimensions (remove the dimension of the div) 
 
    var h = $(window).height() - 50; 
 
    var w = $(window).width() - 50; 
 

 
    var nh = Math.floor(Math.random() * h); 
 
    var nw = Math.floor(Math.random() * w); 
 

 
    return [nh, nw]; 
 

 
} 
 

 
function animateDiv() { 
 
    var el = $(this); 
 
    var newq = makeNewPosition(); 
 
    var oldq = $(el).offset(); 
 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 
 

 
    $(el).animate({ 
 
    top: newq[0], 
 
    left: newq[1] 
 
    }, speed, function() { 
 
    animateDiv.apply(this); 
 
    }); 
 

 
}; 
 

 

 
function calcSpeed(prev, next) { 
 

 
    var x = Math.abs(prev[1] - next[1]); 
 
    var y = Math.abs(prev[0] - next[0]); 
 

 
    var greatest = x > y ? x : y; 
 

 
    var speedModifier = .4; 
 

 
    var speed = Math.ceil(greatest/speedModifier); 
 

 
    return speed; 
 

 
}

.balloon { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    position: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Create a New Pen</title> 
 

 
    <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> 
 

 
    <link rel="stylesheet" href="css/style.css"> 
 

 

 
</head> 
 

 
<body> 
 
    <div class='balloon'></div> 
 
    <div class='balloon'></div> 
 
    <div class='balloon'></div> 
 

 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> 
 

 
    <script src="js/index.js"></script> 
 

 
</body> 
 

 
</html>

出典

2017-09-20 Donald Roos

にCNDのjqueryの要求を変更するには、彼らの周りのdivをラップする必要があり、例えば.container、そのためのCSS値を設定し、変更します。

// Get viewport dimensions (remove the dimension of the div) 
var h = $('.container').height() - 50; 
var w = $('.container').width() - 50;

そしてそこに行く：それは正常に動作しますように

$(document).ready(function(){ 
 
    $('.balloon').each(animateDiv); 
 
}); 
 

 
function makeNewPosition(){ 
 
    
 
    // Get viewport dimensions (remove the dimension of the div) 
 
    var h = $('.container').height() - 50; 
 
    var w = $('.container').width() - 50; 
 
    
 
    var nh = Math.floor(Math.random() * h); 
 
    var nw = Math.floor(Math.random() * w); 
 
    
 
    return [nh,nw];  
 
    
 
} 
 

 
function animateDiv(){ 
 
    var el = $(this); 
 
    var newq = makeNewPosition(); 
 
    var oldq = $(el).offset(); 
 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 
 
    
 
    $(el).animate({ top: newq[0], left: newq[1] }, speed, function(){ 
 
     animateDiv.apply(this);   
 
    }); 
 
    
 
}; 
 

 

 
function calcSpeed(prev, next) { 
 
    
 
    var x = Math.abs(prev[1] - next[1]); 
 
    var y = Math.abs(prev[0] - next[0]); 
 
    
 
    var greatest = x > y ? x : y; 
 
    
 
    var speedModifier = .4; 
 

 
    var speed = Math.ceil(greatest/speedModifier); 
 

 
    return speed; 
 

 
}

.container { 
 
position:relative; 
 
width:400px; 
 
height:200px; 
 
border: solid 1px; 
 
margin: 50px auto 1000px auto; 
 
} 
 

 
.balloon { 
 
width: 50px; 
 
height:50px; 
 
background-color:red; 
 
position:absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Create a New Pen</title> 
 
    
 
    
 
    <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> 
 

 
     <link rel="stylesheet" href="css/style.css"> 
 

 
    
 
</head> 
 

 
<body> 
 
<div class='container'> 
 
    <div class='balloon'></div> 
 
    <div class='balloon'></div> 
 
    <div class='balloon'></div> 
 
</div> 
 

 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> 
 

 
    <script src="js/index.js"></script> 
 

 
</body> 
 
</html>

出典

2017-09-20 20:31:14 MarioZ

マリオありがとう！正常に動作しているようです。しかし、スクロールすると、バルーンがdivから飛び出します。したがって、スクロールしながら表示されます。私は彼らが部門に留まることを願っています。（うまくいけば私が意味するものを理解する）。 –

あなたは大歓迎です@DonaldRoos！あなたが何を意味するのかを見て、自分のコードを見て、私はフィドルで下にスクロールし、それが動作することを確認する余裕を追加しました。私は、気球についてのCSSを言いたいのは忘れていました。なぜなら、「位置：絶対」のために「位置：固定」を変えなければならないからです。 – MarioZ

ありがとう@MarioZ！これは動作します！クール –

div要素を作成し、CSSの高さと幅を追加します。ウィンドウの代わりに、.height()と.width()の部分にdivを付けたクラスを使用します。

あなたはhtmlのdivに気球を入れる必要はありませんが、私はちょうどcuzでした。

$(document).ready(function(){ 
 
    $('.balloon').each(animateDiv); 
 
}); 
 

 
function makeNewPosition(){ 
 
    
 
    // Get viewport dimensions (remove the dimension of the div) 
 
    var h = $('.sky').height() - 50; 
 
    var w = $('.sky').width() - 50; 
 
    
 
    var nh = Math.floor(Math.random() * h); 
 
    var nw = Math.floor(Math.random() * w); 
 
    
 
    return [nh,nw];  
 
    
 
} 
 

 
function animateDiv(){ 
 
    var el = $(this); 
 
    var newq = makeNewPosition(); 
 
    var oldq = $(el).offset(); 
 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 
 
    
 
    $(el).animate({ top: newq[0], left: newq[1] }, speed, function(){ 
 
     animateDiv.apply(this);   
 
    }); 
 
    
 
}; 
 

 

 
function calcSpeed(prev, next) { 
 
    
 
    var x = Math.abs(prev[1] - next[1]); 
 
    var y = Math.abs(prev[0] - next[0]); 
 
    
 
    var greatest = x > y ? x : y; 
 
    
 
    var speedModifier = .4; 
 

 
    var speed = Math.ceil(greatest/speedModifier); 
 

 
    return speed; 
 

 
}

.balloon { 
 
width: 50px; 
 
height:50px; 
 
background-color:red; 
 
position:fixed; 
 
    
 
} 
 
.sky{ 
 
    width:100%; 
 
    height:150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html > 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Create a New Pen</title> 
 
    
 
    
 
    <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> 
 

 
     <link rel="stylesheet" href="css/style.css"> 
 

 
    
 
</head> 
 

 
<body> 
 
<div class="sky"> 
 

 
</div><div class='balloon'></div> 
 
<div class='balloon'></div> 
 
<div class='balloon'></div> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> 
 

 
    <script src="js/index.js"></script> 
 

 
</body> 
 
</html>

出典

2017-09-20 20:26:28

こんにちはペイジ、はそれは見えます。しかし、スクロールすると、バルーンがdivから飛び出します。したがって、スクロールしながら表示されます。私は彼らが部門に留まることを願っています。（うまくいけば私が意味するものを理解する）。 –

私はいくつかのことを削除しました。ちょうど次のコードに従ってください。 HTTPS

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

$(document).ready(function() { 
 
    $('.balloon').each(animateDiv); 
 
}); 
 

 
function makeNewPosition() { 
 

 
    // Get viewport dimensions (remove the dimension of the div) 
 
    var h = $(window).height() - 50; 
 
    var w = $(window).width() - 50; 
 

 
    var nh = Math.floor(Math.random() * h); 
 
    var nw = Math.floor(Math.random() * w); 
 

 
    return [nh, nw]; 
 

 
} 
 

 
function animateDiv() { 
 
    var el = $(this); 
 
    var newq = makeNewPosition(); 
 
    var oldq = $(el).offset(); 
 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 
 

 
    $(el).animate({ 
 
    top: newq[0], 
 
    left: newq[1] 
 
    }, speed, function() { 
 
    animateDiv.apply(this); 
 
    }); 
 

 
}; 
 

 

 
function calcSpeed(prev, next) { 
 

 
    var x = Math.abs(prev[1] - next[1]); 
 
    var y = Math.abs(prev[0] - next[0]); 
 

 
    var greatest = x > y ? x : y; 
 

 
    var speedModifier = .4; 
 

 
    var speed = Math.ceil(greatest/speedModifier); 
 

 
    return speed; 
 

 
}

.balloon { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    position: fixed; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Create a New Pen</title> 
 
    <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> 
 
</head> 
 

 
<body> 
 
    <div class='balloon'></div> 
 
    <div class='balloon'></div> 
 
    <div class='balloon'></div> 
 

 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 

 

 
</body> 
 

 
</html>

出典

2017-09-20 20:29:15 sarathkumar

他のdivに飛んでいるdiv（ページ全体ではない）

答えて

関連する問題