Javascript.RU

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

Js parallax mouser Помогите!
Столкнулся с проблемой как применить один скрипт к двум блокам чтоб они работали только когда на них наводишь

<script type="text/javascript">
window.onload = function () {

var parallaxBox = document.getElementById ( 'box' );
var c1left = document.getElementById ( 'l1' ).offsetLeft,
c1top = document.getElementById ( 'l1' ).offsetTop,
c2left = document.getElementById ( 'l2' ).offsetLeft,
c2top = document.getElementById ( 'l2' ).offsetTop,
c3left = document.getElementById ( 'l3' ).offsetLeft,
c3top = document.getElementById ( 'l3' ).offsetTop,
c4left = document.getElementById ( 'l4' ).offsetLeft,
c4top = document.getElementById ( 'l4' ).offsetTop;


parallaxBox.onmousemove = function ( event ) {
event = event || window.event;
var x = event.clientX - parallaxBox.offsetLeft,
y = event.clientY - parallaxBox.offsetTop;

mouseParallax ( 'l1', c1left, c1top, x, y, 30 );
mouseParallax ( 'l2', c2left, c2top, x, y, 10 );
mouseParallax ( 'l3', c3left, c3top, x, y, 5 );
mouseParallax ( 'l4', c4left, c4top, x, y, 5 );
}

}

function mouseParallax ( id, left, top, mouseX, mouseY, speed ) {
var obj = document.getElementById ( id );
var parentObj = obj.parentNode,
containerWidth = parseInt( parentObj.offsetWidth ),
containerHeight = parseInt( parentObj.offsetHeight );
obj.style.left = left - ( ( ( mouseX - ( parseInt( obj.offsetWidth ) / 2 + left ) ) / containerWidth ) * speed ) + 'px';
obj.style.top = top - ( ( ( mouseY - ( parseInt( obj.offsetHeight ) / 2 + top ) ) / containerHeight ) * speed ) + 'px';
}

</script>

<main id="box">
<div class="layer" id="l1">
<a class="hill" href="/"> </a>
</div>
<div class="layer" id="l2">

</div>
<div class="layer" id="l3">

</div>
<div class="layer" id="l4">
<div class="petal">&nbsp;</div>

</div>
</main>
<main id="box2">
<div class="layer" id="l1">
<a class="hill" href="/"> </a>
</div>
<div class="layer" id="l2">

</div>
<div class="layer" id="l3">

</div>
<div class="layer" id="l4">
<div class="petal">&nbsp;</div>

</div>
</main>
Когда 1 скрипт работает только box2 когда делаю точно такой же скрипт и меняю там box на box2 то box2 работает а box перестаёт
Если нужно понять как это выглядет вот сайт http://teamplay26.ru/
Ответить с цитированием
  #2 (permalink)  
Старый 01.02.2018, 10:18
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

Когда вы объявляете обработчик события через свойство несколько раз, то сохраняется только последний (статья).
У вас все работает на ID, а они обязаны быть уникальными, т.е. для дублирования функционала недостаточно изменить только ID элемента "#box", нужно менять все используемые айдишники (не уверен, т.к. не разбирался в предназначении лапши из "c[\d]top").

Скрипт полностью копировать вовсе необязательно, можно просто обернуть его в функцию и передавать необходимые параметры в аргументах.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите расшифровать JS pavdin Общие вопросы Javascript 24 01.04.2017 20:37
Помогите доработать js скрипт меню mirabo Элементы интерфейса 0 06.08.2015 13:13
Помогите исправить ошибку. node js (tradebot) SuperGangster Node.JS 3 22.07.2015 22:02
Помогите разобраться ... Я новенький в JS ... bogong Общие вопросы Javascript 23 27.12.2011 19:20
помогите со js скриптом поиска по текстовой базе MorganStels Ваши сайты и скрипты 4 15.06.2010 10:03