1. Задача следующая, нужно чтобы черный прямоугольник(korobka2) начинал свое движение с места белого прямоугольника (korobka) и следовал при нажатии на фон за курсором. А он с сожалению вылетает из (top:0; left:0
.
2. А вторая задача, при остановке черный прямоугольник(korobka2) вновь превращался в белый прямоугольник (korobka).
Вот пример:
http://troinfo.ru/000/primer.html
<html>
<head>
<script type="text/javascript" src="core_engine/scriptjava.js"></script>
<script type="text/javascript" src="core_engine/cartoon_background.js"></script>
<script type="text/javascript" src="core_engine/cartoon_rubin.js"></script>
<script type="text/javascript" src="core_engine/cartoon_background2.js"></script>
</head>
<body onmousemove="mouseShowHandler(event);">
<style>
.korobka {
position: absolute;
top: 85;
left: 240;
opacity: 1;
}
.korobka2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: left 3s cubic-bezier(0.0,0.5,0.5,1.0), top 3s cubic-bezier(0.0,0.5,0.5,1.0);
}
.fon {
position: absolute;
top: 0;
left: 0;
}
.input_c {
position: absolute;
top: 300;
}
.input_c2 {
position: absolute;
top: 350;
}
</style>
<div class="fon"><img width="640" height="190" src="fon.jpg" onclick="funkcia(event)"></div>
<div id="korobkaid" class="korobka"><img width="160" height="20" src="box.jpg"></div>
<div id="korobka2id" class="korobka2"><img width="160" height="20" src="box2.jpg"></div>
<div class="input_c"><input type="text" id="mouseX"> <input type="text" id="mouseY"></div>
<div class="input_c2"><input type="text" id="divX" value=""> <input type="text" id="divY" value=""></div>
<script>
function getOffsetSum(elem) { // Определяем положение DIV (более простой вариант который работает во многих браузерах)
var top=0, left=0
while(elem) {
top = top + parseFloat(elem.offsetTop)
left = left + parseFloat(elem.offsetLeft)
elem = elem.offsetParent
}
document.getElementById('divY').value = top;
document.getElementById('divX').value = left;
return {top: Math.round(top), left: Math.round(left)}
}
function getOffsetRect(elem) { // Определяем положение DIV
// (1)
var box = elem.getBoundingClientRect();
// (2)
var body = document.body;
var docElem = document.documentElement;
// (3)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
// (4)
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
// (5)
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
document.getElementById('divY').value = top;
document.getElementById('divX').value = left;
return { top: Math.round(top), left: Math.round(left) };
}
function getOffset(elem) {
if (elem.getBoundingClientRect) {
// "правильный" вариант
return getOffsetRect(elem)
} else {
// пусть работает хоть как-то
return getOffsetSum(elem)
}
}
function mouseShowHandler(e){ // Определяем положение мышки
e = e || window.event;
if (e.pageX == null && e.clientX != null ) {
var html = document.documentElement;
var body = document.body;
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
}
document.getElementById('mouseX').value = e.pageX;
document.getElementById('mouseY').value = e.pageY;
var top2 = e.pageX;
var left2 = e.pageY;
return { top2: e.pageY, left2: e.pageX };
}
function funkcia(event){
var a=this.getOffset(korobkaid);
var b=this.mouseShowHandler(event);
// здесь требуется, чтобы korobka2id не с нулевых координат (top:0; left:0;) двигалась,
// а начинала свое движение с месте где расположен белый блок(korobkaid) и в сторону курсора
//присваеваем новые координаты белому квадрату
korobka2id.style.top = a.top;
korobka2id.style.left = a.left;
document.querySelector('.korobka2').style.opacity = 1;
document.querySelector('.korobka').style.transition = 'opacity 0s'; // исчезновение белого блока
document.querySelector('.korobka').style.opacity = 0;
// двигаемся за курсором мыши
document.querySelector('.korobka2').style.left = b.left2 - 80; // где 80 половина длины korobka2
document.querySelector('.korobka2').style.top = b.top2 - 10; // где 10 половина высоты korobka2
korobka2_id.addEventListener('transitionend', funkcia2, true); /* на будущее */
}
function funkcia2(){ // здесь требуется по прекращению движения белого квадрата(korobka2id),
//чтобы он превращался в черный(korobkaid)
var div2=this.getOffsetRect(korobka2id);
document.querySelector('.korobka').style.transition = 'opacity 0s';
document.querySelector('.korobka').style.opacity = 1;
document.querySelector('.korobka').style.top = div2.top;
document.querySelector('.korobka').style.left = div2.left;
document.querySelector('.korobka2').style.opacity = 0;
}
</script>
</body>
</html>
