| limon103278 |
05.04.2018 14:57 |
Контент с шарами
Всем доброго времени суток ребят,в общем не получается следующие задания выполнить,буду признателен каждому,кто поможет
1)Добавьте кнопки "Поместить за текст", "Поместить перед текстом",добавил кнопки,но хотелось бы чтоб шарики при нажатии перемешались как это нужно по кнопкам
2)Сделайте автоматическое перемещение шариков (свободный полет шариков),вроде бы сделал,но хотелось бы чтоб шары перемещались змейкой,то есть вверх вниз(если возможно)
3)Сделайте так, чтобы шарики перемещались за курсором мыши
<html>
<head>
<title>Пример 4. Перемещение слоев</title>
</head>
<body id='bod'>
<img id='pic' src='aero.gif' style='position:relative' />
<script>
x=100;
y=50;
dx=10;
dy=10;
pic.style.top=y;
pic.style.left=x;
function Balloon(){
x+=dx;
y+=dy;
if(y+pic.clientHeight<bod.clientHeight){
pic.style.top=y;
}
else dy*=-1;
if(x+pic.clientWidth<bod.clientWidth){
pic.style.left=x;
}
else dx*=-1;
if(y>0){
pic.style.top=y;
}
else dy*=-1;
if(x>0){
pic.style.left=x;
}
else dx*=-1;
}
setInterval(Balloon, 5);
function move(n){
var a,b;
a=document.getElementById('div1').style.left;
b=document.getElementById('div1').style.top;
switch (n) {
case 1: document.getElementById('div1').style.top=parseInt(b)+30; break;
case 2: document.getElementById('div1').style.top=parseInt(b)-30;break;
case 3: document.getElementById('div1').style.left=parseInt(a)+30;break;
case 4: document.getElementById('div1').style.left=parseInt(a)-30;break;
case 5: document.getElementById('div1').style.right=500;break;
case 6: document.getElementById('div1').style.left=parseInt(a)-300;break;
}
}
</script>
<form>
<table>
<tr>
<td> <input type="button" value="вверх" onclick="move(2)"> </td>
<td> <input type="button" value="влево"onclick="move(4)"> </td>
<td> <input type="button" value="Поместить перед текстом" onclick="move(6)"> </td>
<td> <input type="button" value="Поместить за текст" onclick="move(5)"> </td>
<td> <input type="button" value="вправо" onclick="move(3)"> </td>
<td> <input type="button" value="вниз" onclick="move(1)"> </td>
</tr>
</table>
</form>
<h2>Пример 4. Перемещение слоев</h2>
<div id="top">
Стихотворение <A HREF="http://referats.yandex.ru/pushkin/"> А.С.Пушкина</A>
<p>
***
<p>
И по хребтам твоим направить<br/>
Как, сердца исповедь любя<br/>
Не удалось навек оставить
<p>
Послушай, гетман: для тебя<br/>
В забвенье сердца улетает<br/>
Вниманье дружбы возлюбя
<p>
Увы, Татьяна увядает<br/>
Самовластительный Злодей<br/>
Пустынный воздух рассекает
<p>
Мученье модных рифмачей<br/>
Из мира вытеснят и нас<br/>
Подругой ветреной моей.
</div>
</body>
</html>
|
