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"> </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"> </div> </div> </main> Когда 1 скрипт работает только box2 когда делаю точно такой же скрипт и меняю там box на box2 то box2 работает а box перестаёт Если нужно понять как это выглядет вот сайт http://teamplay26.ru/ |
Когда вы объявляете обработчик события через свойство несколько раз, то сохраняется только последний (статья).
У вас все работает на ID, а они обязаны быть уникальными, т.е. для дублирования функционала недостаточно изменить только ID элемента "#box", нужно менять все используемые айдишники (не уверен, т.к. не разбирался в предназначении лапши из "c[\d]top"). Скрипт полностью копировать вовсе необязательно, можно просто обернуть его в функцию и передавать необходимые параметры в аргументах. |
Часовой пояс GMT +3, время: 23:04. |