根据鼠标的位置在div内滑动元素
[英]Slide element inside a div depending of the mouse entry position
问题描述
I would like to slide-in an element inside a div, but the sliding position should vary. 
我想在div内插入一个元素，但是滑动位置应该有所不同。
<div class="block">
<div class="hover">…</div>
</div>
If the user enters the div from left the element should slide from left, if from right the element should slide in from right, same for the other sides. 如果用户从左侧输入div，则该元素应从左侧滑动，如果从右侧进入，则该元素应从右侧滑动，其他方向相同。
Also for top/bottom, I will require to save to a variable, the side from which the user entered the div and trigger a function depending on the value of the variable. 同样对于顶部/底部，我将需要保存到变量中，即用户输入div的那一侧，并根据变量的值触发函数。
How can I determine the direction/position? 如何确定方向/位置？ I'm using the jQuery libraray, but plain JavaScript is also acceptable. 我正在使用jQuery libraray，但是纯JavaScript也可以接受。
2 个解决方案
解决方案1
1 2011-07-28 12:57:33
Basically, what you would have to do is use jQuery's mouseover and get the clientX and clientY from the event object. 基本上，您需要做的是使用jQuery的mouseover并从事件对象中获取clientX和clientY。 Then use that info in conjunction with offset(), height(), and width() to determine which side of the <div> they're coming from. 然后，将该信息与offset（），height（）和width（）结合使用，以确定它们来自<div>哪一侧。 Example: 例：
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title></title>
</head>
<body>
<div id="box" style="width:200px;height:200px;background:red;position:absolute;top:100px;left:100px;"><div id="cover" style="position:absolute;background:blue;width:0;height:0;overflow:hidden;z-index:50;"></div></div>
<script>
$(function(){
var $box = $('#box').mouseenter(function(event){
// coming from the top
if (Math.abs(event.pageY - offset.top) < 10) {
$cover.css('width',width).animate({
height:height
})
}
//coming from the left
else if (Math.abs(event.pageX - offset.left) < 10) {
$cover.css('height',height).animate({
width:width
})
}
//coming from the bottom
else if (Math.abs(event.pageY - (offset.top + height)) < 10) {
$cover.css({
width:width,
top:'auto',
bottom:0
}).animate({
height:height
})
}
//coming from the right
else {
$cover.css({
height:height,
left:'auto',
right:0
}).animate({
width:width
})
}
}).mouseleave(function(){
// reset it
$cover.css({
width:0,
height:0,
bottom:'auto',
right:'auto',
left:'auto',
top:'auto'
})
}), $cover = $('#cover'), offset = $box.offset(), width = $box.width(), height = $box.height()
})
</script>
</body>
</html>
(Sorry for the wait ;) （抱歉，久等了 ;）
解决方案2
0 2011-07-28 13:08:35
Here is my updated sample, it is untested - however it should work. 这是我更新的示例，未经测试-但是应该可以使用。
$(".block").mouseenter(function(event){
if(!$(".hover").is(":animated")){
if(event.pageX > ($(".block").position().left + ($(".block").width()/2)))
{
$(".hover").css("left", "-100px");
} else {
$(".hover").css("left", "200px");
{
$(".hover").animate({ left : 0 },300);
}
});
css 的CSS
.block {
position: relative;
height: 100px;
width: 100px;
overflow: hidden;
background-color: #fff;
}
.block .hover {
position: absolute;
left: -100px;
height: 100px;
width: 100px;
background-color: #00f;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.