百度新闻首页传媒这一栏，鼠标滑过会出现标题遮罩层，鼠标离开遮罩层消失，而且鼠标从哪个方向离开，遮罩层从哪个方向上消失。
运用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<boxLeft){ 28 $("#sbox1").animate({left:‘-200px‘},300); 29 }else if(endX>boxRight){ 30 $("#sbox1").animate({left:‘200px‘},300); 31 }else if(endY<boxTop){ 32 $("#sbox1").animate({top:‘-150px‘},300); 33 }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<boxLeft){ 47 $("#sbox2").animate({left:‘-200px‘},300); 48 }else if(endX>boxRight){ 49 $("#sbox2").animate({left:‘200px‘},300); 50 }else if(endY<boxTop){ 51 $("#sbox2").animate({top:‘-150px‘},300); 52 }else if(endY>boxBottom){ 53 $("#sbox2").animate({top:‘150px‘},300); 54 } 55 }); 56 57 //如果再多几个，如何用数组和循环批量处理，优化代码
四、在根文件夹加你index.html文件。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> 5 <title>新网页文档</title> 6 <meta name="generator" content="editplus" /> 7 <meta name="author" content="kalychen" /> 8 <meta name="keywords" content="" /> 9 <meta name="description" content="" /> 10 <link rel="stylesheet" type="text/css" href="css/reset.css" /> 11 <link rel="stylesheet" type="text/css" href="css/style.css" /> 12 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 13 </head> 14 15 <body> 16 <div id="box1" class="box"> 17 <a href="https://www.baidu.com"> 18 <div id="sbox1" class="sbox"> 19 <img class="imgforce" src="img/logo-cankaoxiaoxi.png" width="" height="" border="0" alt="参考消息"> 20 </div> 21 </a> 22 </div> 23 <div id="box2" class="box"> 24 <a href="http://www.163.com"> 25 <div id="sbox2" class="sbox"> 26 <img class="imgforce" src="img/logo-huaxi.png" width="" height="" border="0" alt="华西都市报"> 27 </div> 28 </a> 29 </div> 30 </body> 31 <script type="text/javascript" src="js/move.js"></script> 32 </html>
运行结果截图：
原文：http://www.cnblogs.com/xxkalychen/p/4845166.html