我一直在这里做一些研究，以享受学习JavaScript的乐趣。我一直在谷歌搜索找到答案，但没有运气。可能是我有点像业余爱好者而且不知道要搜索的正确术语，但也许有人可以引导我朝着正确的方向前进或帮助我。
无论如何，我正在寻找一种让div坐在中心并随着每个单选按钮随机移动一个页面的方法。就像，div是一种颜色，一个单击第一个单选按钮，它将从中心移动一点，然后中间单选按钮一个将移动更多，但最后一个单选按钮将移动很远。
明显的起点是页面的“中心”，终点无关紧要。它只需要按下每个按钮随机移动。
我有很好的HTML和CSS技能，非常基本的JS技能，以及一些实现JQuery的经验。理想情况下，我想把它想象成图书馆和我所拥有的两个文本没有帮助。
这是我到目前为止所拥有的。
提前致谢!!!
<html>
<head>
<style>
div.a {
width: 50px;
height:50px;
background-color:red;
margin:0px;
}
</style>
<script>
function showStyle() {
//alert(" ss " );
var id = document.getElementById("div1");
var str = "";
str = str + "position: " + id.style.position + ";";
str += "<br>top: " + id.style.top;
str += "<br>left: " + id.style.left;
str += "<br>width: " + id.style.width;
str += "<br>height: " + id.style.height;
document.getElementById("para").innerHTML = str;
}
function myFunction(){
var x= document.getElementById("smallRadio");
x.checked = true; }
function smallRadio() {
var id = document.getElementById("div1");
id.style.top = (parseInt(id.style.top) + 50) + "px";
}
function myFunction(){
var x= document.getElementById("mediumRadio");
x.checked = true; }
function smallRadio() {
var id = document.getElementById("div1");
id.style.top = (parseInt(id.style.top) + 50) + "px";
}
function myFunction(){
var x= document.getElementById("largeRadio");
x.checked = true; }
function smallRadio() {
var id = document.getElementById("div1");
id.style.top = (parseInt(id.style.top) + 50) + "px";
}
$(document).ready(function(){
animateDiv();
});
function makeNewPosition(){
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 newq = makeNewPosition();
$('.a').animate({ top: newq[0], left: newq[1] }, function(){
animateDiv();
});
};
</script>
</head>
<body>
<h3>Click</h3>
Small Leap: <input type="radio" id="smallRadio"><br>
Medium Leap: <input type="radio" id="mediumRadio"><br>
Big Leap: <input type="radio" id="largeRadio"><br>
<button onclick="myFunction()">Click!</button>
<div class='a'></div>
答案 0 :(得分：0)
这是我可能会这样做的方式，然后你可以根据需要调整它。此外，请记住使用动画将css位置设置为绝对值。可以找到一个工作小提琴here
CSS
div.a {
width: 50px;
height:50px;
background-color:red;
position:absolute;
}
HTML
<h3>Click</h3>
Small Leap: <input type="radio" id="smallRadio"><br>
Medium Leap: <input type="radio" id="mediumRadio"><br>
Big Leap: <input type="radio" id="largeRadio"><br>
<div class='a' id="mainDiv"></div>
的Javascript
$(document).on('change', 'input:radio', function(){
var $thisRadio = $(this); //gives us a jQuery instance of current radio that triggered the event
//update functions
updateDivPosition($thisRadio);
});
function updateDivPosition($target)
{
var $div = $('#mainDiv');
var newLeft = 0;
var newTop = 0;
var currentPosition = $div.position();
switch($target.attr("id"))
{
case "smallRadio":
newTop = currentPosition.top + 10;
newLeft = currentPosition.left + 10;
break;
case "mediumRadio":
newTop = currentPosition.top + 30;
newLeft = currentPosition.left + 30;
break;
case "largeRadio":
newTop = currentPosition.top + 50;
newLeft = currentPosition.left + 50;
break;
}
newTop = newTop + "px";
newLeft = newLeft + "px";
$div.animate({"left": newLeft, "top":newTop},1000);
}
答案 1 :(得分：0)
HTML
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h3>Click</h3>
Small Leap: <input type="radio" name="leap" value="small" id="smallRadio"><br>
Medium Leap: <input type="radio" name="leap" value="medium" id="mediumRadio"><br>
Big Leap: <input type="radio" name="leap" value="large" id="largeRadio"><br>
<button onclick="delegateJump()">Click!</button>
<div class='a' data-top="0" data-left="0"></div>
<div id='div1'></div>
<div id='para'></div>
</body>
</html>
CSS
div.a {
width: 50px;
height:50px;
background-color:red;
margin:0px;
position: absolute;
top: 50%;
left:50%;
}
的Javascript
function showStyle() {
//alert(" ss " );
var id = document.querySelector('.a');
var str = "";
str = str + "position: " + id.style.position + ";";
str += "<br>top: " + id.style.top;
str += "<br>left: " + id.style.left;
str += "<br>width: " + id.style.width;
str += "<br>height: " + id.style.height;
str += "<br>move top: " + id.dataset.top;
str += "<br>move left: " + id.dataset.left;
document.getElementById("para").innerHTML = str;
}
function smallJump(){
return Math.floor(Math.random() * 25) - 10;
}
function mediumJump(){
return Math.floor(Math.random() * 100) - 50;
}
function largeJump(){
return Math.floor(Math.random() * 200) - 100;
}
function delegateJump() {
var type = $('input[name="leap"]:checked').val();
var div = $('.a')
switch (type) {
case "small":
div.attr("data-top", smallJump());
div.attr("data-left", smallJump());
break;
case "medium":
div.attr("data-top", mediumJump());
div.attr("data-left", mediumJump());
break;
case "large":
div.attr("data-top", largeJump());
div.attr("data-left", largeJump());
break;
default:
div.attr("data-top", 0);
div.attr("data-left", 0);
break;
}
}
$(document).ready(function(){
animateDiv();
});
function makeNewPosition(x,y){
var w = $(window).width() - 50;
var h = $(window).height() - 50;
var x = parseInt(x, 10) || 0;
var y = parseInt(y, 10) || 0;
var nw = Math.floor(Math.random() * w) + x;
var nh = Math.floor(Math.random() * h) + y;
return [nh,nw];
}
function animateDiv(){
var newq = makeNewPosition.apply(null, [$('.a').attr('data-top'), $('.a').attr('data-left') ] );
showStyle();
$('.a').animate({ top: newq[0], left: newq[1] }, function(){
animateDiv();
});
};
我在代码中更改了一些内容。
我切换到使用数据属性来保存跳转值。
随着数据属性保持该值，随机跳转动画使用该值重新计算进一步的跳跃。
我为div的样式添加了绝对定位。
您的广播输入需要一个名称，这样您就可以使用一个选择器从任意一个中获取值。