Показать сообщение отдельно
  #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/
Ответить с цитированием