Скрипт обьекта,который движется за указателем
Всем добрый вечер! Проблема в следующем, есть обьект,который должен двигаться за указателем мыши. Есть скрипт,но почему-то он не работает.Хотя на сайте-примере всё впорядке. Сайт стоит на CMS JOOMLA 3.8.2. Пытаюсь подключить сам скрипт в отдельный файл, работать не хочет. JQuery и JQuery-no.Conflict подключены. Ссылка на Code Pen:
https://codepen.io/Turniket/pen/LeEOrv . В JS ни бум бум, помогите плиз. Браузер выдаёт ошибки, либо Jquery is not defined, либо $ is not defined. Иногда не выдаёт ошибок вообще,но скрипт не работает. |
jQuery обязательна должна быть подключена до скрипта.
https://codepen.io/anon/pen/XVJVbO?editors=0010 |
Проблема в том,что в Joomla подключен jquery по стандарту. И насколько мне известно,раньше чем все остальные скрипты.
|
Turniket,
после строки загрузки JQuery поставьте этот скрипт |
Так оно и есть.Но скрипт всёравно не работает(:-?
|
Turniket,
:-? список подгружаемых сриптов можно увидеть? |
<script src="/media/jui/js/jquery.min.js?34388458973f1b0f62b98d1da2ce9396" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js?34388458973f1b0f62b98d1da2ce9396" type="text/javascript"></script> <script src="/media/jui/js/jquery-migrate.min.js?34388458973f1b0f62b98d1da2ce9396" type="text/javascript"></script> это в хэде, а мой скрипт подключен под подвалом. |
Turniket,
<script src="/media/jui/js/jquery.min.js?34388458973f1b0f62b98d1da2ce9396" type="text/javascript"></script> сюда ваш скрипт <script src="/media/jui/js/jquery-noconflict.js?34388458973f1b0f62b98d1da2ce9396" type="text/javascript"></script> <script src="/media/jui/js/jquery-migrate.min.js?34388458973f1b0f62b98d1da2ce9396" type="text/javascript"></script> |
К сожалению,я не могу повлиять на эту строку, так как эти подключения реализуются самой джумлой.
|
эм...мистическим образом скрипт заработал. Теперь вопрос в другом,можно ли отредактировать этот скрипт,чтоб обьект двигался только в переделах нужного мне блока,а когда указатель покидает блок, обьект либо становится на своё исходное место,либо просто перестаёт реагировать на указатель мыши?
|
Вариант)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Пример</title>
</head>
<body>
<div class="div" onmousemove="bol(event);"><div class="boll"></div></div>
<script>
var boll = document.querySelector('.boll'), html = document.documentElement;
function bol(e){
boll.style.left = e.pageX - html.scrollLeft +'px';
boll.style.top = e.pageY - html.scrollTop +'px';
}
</script>
<style>
.div{
width: 200px;
height: 200px;
background: #333;
position: relative;
overflow: hidden;
}
.boll{
width: 10px;
height: 10px;
border-radius: 50%;
position: fixed;
background: #fff;
transition: all 0.2s;
}
</style>
</body>
</html>
|
| Часовой пояс GMT +3, время: 05:04. |