模拟百度新闻首页传媒栏目鼠标滑过的特效

最新推荐文章于 2024-04-26 06:37:48 发布

weixin_33800463

最新推荐文章于 2024-04-26 06:37:48 发布

阅读量117

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xxkalychen/p/4845166.html

版权

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

运用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>

运行结果截图：

转载于:https://www.cnblogs.com/xxkalychen/p/4845166.html

weixin_33800463

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟百度新闻首页传媒栏目鼠标滑过的特效

百度新闻首页传媒这一栏，鼠标滑过会出现标题遮罩层，鼠标离开遮罩层消失，而且鼠标从哪个方向离开，遮罩层从哪个方向上消失。运用javascript和jquery技术很容易实现，但是我是新手，查资料做实验摆弄了一天，终于基本实现了。一、准备1.JQuery文件。2.建立文件结构：根文件夹，下面有js、css、img三个子文件夹。把JQuery文件放到里面。3.在img子文件夹放入...
复制链接

扫一扫