• 展开微博窗口
  • QQ:52619941
  • 微信:cnmemory
  • 展开分类目录
  • 还没有账号?

Memory

JS判断鼠标进入或离开容器的方向做出特殊hover效果

无意中在uemo的一个子站点看到一个很动感的hover效果,经过简单分析,想必是通过JS判断鼠标进入方向来实现这个hover效果,使父容器中的子容器通过判断鼠标进入方向,从而使子容器从相同的方向“进入”到父容器中并且从鼠标离开的方向“离开”父容器。下面这一段js代码来源于网络,如果想深入了解代码的意义请跳转

http://sentsin.com/web/112.html

DEMO:

http://www.im050.com/im050/memory/demo/jquery-direction.html

而在津泓橱柜官方网站的制作过程中,在其产品展示页面也使用了这样的效果

具体参见:http://www.jhcg.net/home/product/

HTML代码部分:

<style>
body {margin: 50px;}
#wrap {width: 100px; height: 100px; background: #000}
#result {wdith: auto; height: auto; line-height: 20px;}
</style>
<div id="wrap"></div>
<div id="result"></div>

以下是js代码,需要jQuery的支持

$("#wrap").bind("mouseenter mouseleave",function(e) {
           var w = $(this).width();
           var h = $(this).height();
           var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
           var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
           var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上,右,下,左”
           var eventType = e.type;
           var dirName = new Array('上方','右侧','下方','左侧');
           if(e.type == 'mouseenter'){
              $("#result").html(dirName[direction]+'进入');
          }else{
              $('#result').html(dirName[direction]+'离开');
          }
      });

上述的代码仅仅只是实现判断鼠标进入和离开的方向,然后我们只需要改动部分的代码就能使其匹配多个元素实现这样的效果。

HTML代码:

<style>
html,body{margin:0;padding:0;}
#wrap{width:300px;height:200px;background:#33aa00; position: relative; overflow: hidden; margin: 10px; float: left;}
.mask {width: 300px;height:200px; background: blue; position: absolute; top:-300px;}
</style>
<div id="wrap">
<div class="mask"></div>
</div>
<div id="wrap">
<div class="mask"></div>
</div>
<div id="wrap">
<div class="mask"></div>
</div>
<div id="wrap">
<div class="mask"></div>
</div>
<div id="wrap">
<div class="mask"></div>
</div>
<div id="wrap">
<div class="mask"></div>
</div>

JS代码:

$("div[id=wrap]").bind("mouseenter mouseleave",
function(e) {
//得到容器的宽度
var w = $(this).width();
//得到容器的高度
var h = $(this).height();
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
var eventType = e.type;
//我们定义子容器起始的坐标
var startX = 0;
var startY = 0;
switch(direction) {
//当从上方进入时
case 0:
startX = 0  //横坐标起始为0,即子容器的left值为0
startY = h*-1;; //而高度等于负的容器高度,即子容器的top为-h
break;
//右
case 1:
startX = w; //子容器的left值即为父容器的宽度
startY = 0; //子容器的top值为0
break;
//下
case 2:
startX = 0; //子容器的left值即为0
startY = h; //子容器的top值即为父容器的高度
break;
//左
case 3:
startX = w*-1; //子容器的left值即为父容器的宽度负数
startY = 0; //子容器的top值即为0
break;
}
if(e.type == 'mouseenter'){
//当鼠标进入时,先将子容器位置重置于startX, startY, 然后通过animate函数实现动画转变
$(this).children(".mask").css({'left':startX, 'top':startY}).stop().animate({'left':0, top:0}, 300);
}else{
//当鼠标离开时,子容器从当前位置退出
$(this).children(".mask").stop().animate({'left':startX, 'top':startY}, 300);
}
});
码字很辛苦,转载请注明来自雨林寒舍《JS判断鼠标进入或离开容器的方向做出特殊hover效果》

评论

  1. 贤心 #1

    mark一下棠哥的blog么?

    回复
    2014-08-19
    • 请叫我全名050

      不是不是,认错人了,我只是偶然在网上搜索想了解下这个方法的剖析,就看见你的博客~

      回复
      2014-08-19