Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.07.2018, 23:01
Интересующийся
Отправить личное сообщение для Роман1479 Посмотреть профиль Найти все сообщения от Роман1479
 
Регистрация: 06.10.2017
Сообщений: 24

Упростить код движения за мышкой
Добрый день, может я уже на это форуме всем надоел, но нужна помощь. Движение за мышью. Не понятно себя ведет прицел, может кто помочь?

https://jsfiddle.net/roman1479/arvfgkc9/
Ответить с цитированием
  #2 (permalink)  
Старый 06.07.2018, 23:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Роман1479,
setInterval уберите из кода, а лучше никогда не использовать.
https://jsfiddle.net/arvfgkc9/5/
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2018, 23:20
Интересующийся
Отправить личное сообщение для Роман1479 Посмотреть профиль Найти все сообщения от Роман1479
 
Регистрация: 06.10.2017
Сообщений: 24

Понял, учту, спасибо большое
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2018, 23:28
Интересующийся
Отправить личное сообщение для Роман1479 Посмотреть профиль Найти все сообщения от Роман1479
 
Регистрация: 06.10.2017
Сообщений: 24

рони,
А какой есть вариант, что-бы если цель(картинка) достигнув курсора появлялась надпись вместо цели(картинки)??
Ответить с цитированием
  #5 (permalink)  
Старый 06.07.2018, 23:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Роман1479,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #etsa {
		  width: 50px;
		  height: 50px;
		  background: url(http://us.123rf.com/400wm/400/400/speedfighter/speedfighter1001/speedfighter100100101/6236656-sniper-rifle-target-cross-hairs-silhouetted-on-white-background.jpg) no-repeat;
		  background-size: 50px 50px;
		  margin: -25px 0 0 -25px;
		  position: absolute;
		  transition: top 0.5s, left 0.5s;
		  -webkit-transition: top 0.5s, left 0.5s;
		}

		body {
		  margin: 0;
		  overflow: hidden;
		}

  </style>

</head>

<body>
<div class="block" id="block">
  <div id="etsa"></div>
</div>
<script>
var el = document.getElementById('etsa'), timer;
document.onmousemove = function(e) {
  window.clearTimeout(timer);
  el.style.backgroundImage = ""
  el.innerHTML = "";
  var X = 0;
  var Y = 0;
  X = e.clientX;
  Y = e.clientY;
  el.style.left = X + 'px';
  el.style.top = Y + 'px';
  timer = window.setTimeout(function() {
  el.innerHTML = "boom!!!";
  el.style.backgroundImage = "none"
}, 500)
};

</script>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 06.07.2018, 23:56
Интересующийся
Отправить личное сообщение для Роман1479 Посмотреть профиль Найти все сообщения от Роман1479
 
Регистрация: 06.10.2017
Сообщений: 24

То что нужно, спасибо
Ответить с цитированием
  #7 (permalink)  
Старый 07.07.2018, 09:05
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

рони, у вас часто меняются параметры анимации, которая не успевает проиграть до конца пока меняется положение курсора, что вместо ease-in-out получается сплайн... что приводит к такому интересному эффекту, когда анимация не успевает проиграть до своего конечного состояния. Мне кажется, что в данном случае лучше не стремиться к какому-то конечному состоянию, а менять параметры анимации всё время...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<style>
		
#etsa {
	position: absolute;
	width: 50px; height: 50px; margin: -25px;
	display: flex; justify-content: center;
	background: url(https://us.123rf.com/400wm/400/400/speedfighter/speedfighter1001/speedfighter100100101/6236656-sniper-rifle-target-cross-hairs-silhouetted-on-white-background.jpg) 0 / 50px no-repeat;
	will-change: transform;
	pointer-events: none;
}

body {
	margin: 0;
	overflow: hidden;
}

	</style>
</head>
<body>
	<div class="block" id="block">
		<div id="etsa"></div>
	</div>
	<script>
		
// cостояние приложения
var x = { current: 0, target: 0 },
    y = { current: 0, target: 0 },
    isBoom = false;


var etsa = document.getElementById("etsa"),
    style = etsa.style,
    timer;

document.onmousemove = function(e) {
	clearTimeout(timer);
	timer = setTimeout(function() { isBoom = true; }, 500);

	x.target = e.clientX;
	y.target = e.clientY;
	isBoom = false;
};

function update() {
	x.current += 0.1 * (x.target - x.current);
	y.current += 0.1 * (y.target - y.current);
	style.transform = `translate(${x.current}px, ${y.current}px)`;
	etsa.textContent = isBoom ? "Boom!" : "";
	style.backgroundImage = isBoom ? "none" : "";
	requestAnimationFrame(update);
}

update();

	</script>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 07.07.2018, 09:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Malleys,
Ответить с цитированием
  #9 (permalink)  
Старый 07.07.2018, 09:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

вслед за курсором
Malleys,
спасибо за подсказку, вариант без setTimeout
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>

#etsa {
    position: absolute;
    width: 50px; height: 50px; margin: -25px;
    display: flex; justify-content: center;
    background: url(https://us.123rf.com/400wm/400/400/speedfighter/speedfighter1001/speedfighter100100101/6236656-sniper-rifle-target-cross-hairs-silhouetted-on-white-background.jpg) 0 / 50px no-repeat;
    will-change: transform;
    pointer-events: none;
}

body {
    margin: 0;
    overflow: hidden;
}

    </style>
</head>
<body>
    <div class="block" id="block">
        <div id="etsa"></div>
    </div>
    <script>

// cостояние приложения
var x = { current: 0, target: 0 },
    y = { current: 0, target: 0 },
    isBoom = false;


var etsa = document.getElementById("etsa"),
    style = etsa.style;

document.onmousemove = function(e) {
    x.target = e.clientX;
    y.target = e.clientY + 2;
    isBoom = false;
};

function update() {
    x.current += 0.1 * (x.target - x.current);
    y.current += 0.1 * (y.target - y.current);
    style.transform = `translate(${x.current}px, ${y.current}px)`;
    isBoom = Math.abs(x.current - x.target) < .1 &&  Math.abs(y.current - y.target) < .1     
    etsa.textContent = isBoom ? "Boom!" : "";
    style.backgroundImage = isBoom ? "none" : "";
    requestAnimationFrame(update);
}

update();

    </script>
</body>
</html>

Последний раз редактировалось рони, 07.07.2018 в 09:32.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите к js коду, написать html код Modrih Элементы интерфейса 8 16.06.2015 18:08
Упростить код Decode Элементы интерфейса 6 16.06.2015 01:10
Упростить код Nifler Общие вопросы Javascript 4 12.06.2015 17:29
Требуется выводить код рекламного блока Adsense из файла JavaScript??? speedflow Элементы интерфейса 0 26.05.2012 15:50
Получить код js-скрипта, находящегося в файле на сервере RomanA Общие вопросы Javascript 4 04.04.2012 09:53