Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.04.2018, 14:57
Новичок на форуме
Отправить личное сообщение для limon103278 Посмотреть профиль Найти все сообщения от limon103278
 
Регистрация: 05.04.2018
Сообщений: 4

Контент с шарами
Всем доброго времени суток ребят,в общем не получается следующие задания выполнить,буду признателен каждому,кто поможет
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>

Последний раз редактировалось limon103278, 05.04.2018 в 15:06.
Ответить с цитированием
  #2 (permalink)  
Старый 05.04.2018, 15:02
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 05.04.2018, 16:57
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

1) тут просто добавляем или убавляем z-index у мяча в зависости от нажатой кнопки.
2) не совсем понял
3) полагаю как-то так (если отставание не нужно, уберите setTimeout
<div>Мяч</div>
<script>
	var div = document.querySelector('div');
	window.addEventListener("mousemove", e=>setTimeout(()=>div.style.cssText = "position:absolute; top:"+e.clientY+"px; left:"+e.clientX+"px",200));
</script>
Ответить с цитированием
  #4 (permalink)  
Старый 05.04.2018, 19:49
Новичок на форуме
Отправить личное сообщение для limon103278 Посмотреть профиль Найти все сообщения от limon103278
 
Регистрация: 05.04.2018
Сообщений: 4



нужно чтоб шарик,тот что на скриншоте двигался с курсором,но я чет не понял извиняюсь,но ваш код вроде не подходит или я ошибаюсь?
что на счет 2 задания,то в моем примере шарики двигаются хаотично,а хотелось бы как в игре змейка или же типа игры зума(не знаю как объяснить это даже),надеюсь что хоть как то смог объяснить Вам
Ответить с цитированием
  #5 (permalink)  
Старый 05.04.2018, 19:51
Новичок на форуме
Отправить личное сообщение для limon103278 Посмотреть профиль Найти все сообщения от limon103278
 
Регистрация: 05.04.2018
Сообщений: 4

Ответить с цитированием
  #6 (permalink)  
Старый 05.04.2018, 20:03
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<div>Шарик</div>
<script>
	var div = document.querySelector('div');
	window.addEventListener("mousemove", e=>div.style.cssText = "transition:4s;position:absolute; top:"+e.clientY+"px; left:"+e.clientX+"px");
</script>
Ответить с цитированием
  #7 (permalink)  
Старый 05.04.2018, 22:09
Новичок на форуме
Отправить личное сообщение для limon103278 Посмотреть профиль Найти все сообщения от limon103278
 
Регистрация: 05.04.2018
Сообщений: 4


посмотрите пожалуйста на скришот,вот эти шарики(красным выделено) нужно чтоб перемещались за мышкой,а высветилась надпись Шарик и она передвигается за курсором,или я что то не так делаю?извиняюсь,если что то не так сделал
Ответить с цитированием
  #8 (permalink)  
Старый 05.04.2018, 23:12
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<img id='pic' src='aero.gif'/>
<script>
	var div = document.querySelector('img');
	window.addEventListener("mousemove", e=>div.style.cssText = "transition:3s;position:absolute; top:"+e.clientY+"px; left:"+e.clientX+"px");
</script>


вот ваши шарики, я думал если вы такой код написали, то как изменить див на шарики догадаетесь.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AngularJS Bootstrap динамический контент - проблемы с виджетами и связыванием vsimashko Angular.js 2 30.07.2014 19:04
Динамический контент Nanto Элементы интерфейса 2 18.04.2014 08:45
Динамический контент с JS frundik AJAX и COMET 2 28.10.2012 17:34
Перемещение блока при скроллинге region029 Общие вопросы Javascript 10 16.06.2012 10:41
Условные операторы, document.referrer и контент страницы Ministr Общие вопросы Javascript 4 05.03.2012 15:33