Привет
Итак, я начал писать некоторую функцию, которая будет делать это (чем ближе вы перемещаете мышь к div, тем ближе div перемещается к позиции мыши on parent X axsis
, максимальная позиция div — left:-40%
, а минимальная — left: -80%
):
Примечание. Черная стрелка – это курсор (положение мыши).
Код
Разметка HTML:
<div class="wraper">
<div class="ls">
<div class="ldiv">
</div>
</div>
<div class="c">
<div class="coordinates">
</div>
<div class="cdiv">
</div>
</div>
<div class="rs">
<div class="rdiv">
</div>
</div>
</div>
Разметка CSS:
body{
margin: 0;
padding: 0;
}
.wraper{
width: 100%;
height: 500px;
}
.ls, .rs{
position: relative;
float: left;
width: 30%;
height: 100%;
background-color: #eeeeee;
}
.c{
position: relative;
float: left;
width: 40%;
height: 100%;
background-color: #dddddd;
}
.cdiv{
position: absolute;
top: 25%;
left: 10%;
width: 80%;
height: 50%;
background-color: red;
}
.ldiv{
position: absolute;
top: 30%;
left: -80%;
width: 80%;
height: 40%;
background-color: red;
}
.rdiv{
position: absolute;
top: 30%;
right: -40%;
width: 80%;
height: 40%;
background-color: red;
}
Разметка Javacsript:
//ASsign global variables
var mouseX = 0;
var newTop = 0;
$("div.ls").mousemove(function(event) {
// Get parrent offset
var parentOffset = $(this).offset();
// Get child division offset
var division = $(".ldiv").offset();
// Calculate mouse position inside left division
var relX = event.pageX - parentOffset.left;
var relY = event.pageY - parentOffset.top;
// Check if mouse changed its position
if (mouseX != relX){
// Get new position of x axis
var newPosX = $(this).width() - relX - 161;
// Get new height of child element in percentage
var newHeight = 100 * parseFloat($(".ldiv").height()) / parseFloat($(this).height());
// Display important stuff
$(".coordinates").text("Mouse position = X:" + relX + " Y:" + relY + "Div offset = X:" + division.left + " Y:" + division.top + " Width = " + $(this).width()+" newHJeight = "+newHeight);
//If mouse moves left
if (mouseX > relX) {
// Cant go lower then 0.2 because javascript is rounding it down
newHeight += 0.2;
// calculate new top so division stays in middle of parent
newTop = (100 - newHeight) / 2;
// Assign new css
$(".ldiv").css({
left: newPosX + "px",
height: newHeight + "%",
top: newTop + "%"
});
}
//If mouse moves right
else {
newHeight -= 0.2;
newTop = (100 - newHeight) / 2;
$(".ldiv").css({
left: newPosX + "px",
height: newHeight + "%",
top: newTop + "%"
});
}
// Record mouse position
mouseX = relX;
}
});
Вот живой пример в jsFiddle
Что я хочу сделать:
- Как я могу переписать этот код, чтобы он работал больше как анимация и не выходил из строя, если я двигал мышь слишком быстро?