百度新闻首页传媒这一栏，鼠标滑过会出现标题遮罩层，鼠标离开遮罩层消失，而且鼠标从哪个方向离开，遮罩层从哪个方向上消失。

运用javascript和jquery技术很容易实现，但是我是新手，查资料做实验摆弄了一天，终于基本实现了。

一、准备

1.JQuery文件。

2.建立文件结构：根文件夹，下面有js、css、img三个子文件夹。把JQuery文件放到里面。

3.在img子文件夹放入相关图片。

二、在css文件夹下建立style.css文件。

1 .box{
   width:200px;height:150px;margin-top:50px;margin-left:10px;border:1px solid #000;padding:0px;overflow:hidden;float:left;}2 #box1{
   background:url(../img/d1.jpg) no-repeat;}3 #box2{
   background:url(../img/d2.jpg) no-repeat;}4 .imgforce{
   margin-top:50px;}5 #sbox1{
   width:200px;height:150px;background:#330000;color:#ffcc33;left:-400px;position:relative;text-align:center;}6 #sbox2{
   width:200px;height:150px;background:#330000;color:#ffcc33;left:-400px;position:relative;text-align:center;}

三、在js文件夹下建立move.js文件。

1 var endX=0;//记录鼠标移出后的X坐标 2 var endY=0;//记录鼠标移出后的Y坐标 3 var boxLeft=0;//父容器的左边界 4 var boxRight=0;//父容器的右边界 5 var boxTop=0;//父容器的上边界 6 var boxBottom=0;//父容器的下边界 7  8 //第一个div的鼠标移入事件 9 $("#box1").mouseenter(function(e){10     $("#sbox1").animate({left:"0px",top:"0px"},300);11 });12 //第二个div的鼠标移入事件13 $("#box2").mouseenter(function(e){14     startX=e.originalEvent.x;15     startY=e.originalEvent.y;16     $("#sbox2").animate({left:"0px",top:"0px"},300);17 });18 //第一个div的鼠标移出事件19 $("#box1").mouseleave(function(e){20     endX=e.originalEvent.x;21     endY=e.originalEvent.y;22     boxLeft=$("#box1").offset().left;23     boxRight=$("#box1").offset().left+$("#box1").width();24     boxTop=$("#box1").offset().top;25     boxBottom=$("#box1").offset().top+$("#box1").height();26     27     if(endX
     
      boxRight){30         $("#sbox1").animate({left:'200px'},300);31     }else if(endY
      
       boxBottom){34         $("#sbox1").animate({top:'150px'},300);35     }36 });37 //第一个div的鼠标移出事件38 $("#box2").mouseleave(function(e){39     endX=e.originalEvent.x;40     endY=e.originalEvent.y;41     boxLeft=$("#box2").offset().left;42     boxRight=$("#box2").offset().left+$("#box2").width();43     boxTop=$("#box2").offset().top;44     boxBottom=$("#box2").offset().top+$("#box2").height();45     46     if(endX
       
        boxRight){49         $("#sbox2").animate({left:'200px'},300);50     }else if(endY
        
         boxBottom){53         $("#sbox2").animate({top:'150px'},300);54     }55 });56 57 //如果再多几个，如何用数组和循环批量处理，优化代码
        
       
      
     

四、在根文件夹建立index.html文件。

1  2  3  4     
      5      6     
      7     
      8     
      9     
     10     
     11     
     12     13 14 15 16     
     
      17         
      18         
       
        19             
        20         
       
21         22     
     
23     
     
      24         
      25         
       
        26             
        27         
       
28         29     
     
30 31 32 

运行结果截图：