用CSS+Jquery实现一个漂浮的窗体

一、项目需求：

实现一个用于网站主页面 从窗体左上角开始飘到右下角 之后又飘到右上角 十秒之后消失的效果。

二、需求分析：

首先 应当想要漂浮的内容放在一个容器内，也就是一个DIV，设计它的样式，不管是背景图片还是文字，甚至是一段多媒体视频等。

其次 要想实现漂浮 这个DIV就不能处于文档流中 否则因为它一定会收到其他HTML内元素的影响 而不能自由移动。漂浮的本质就是

窗体中位置的改变，并且这种改变不能在瞬间完成 而是可以预定时间完成转移。

再次 在DIV移动位置过程中 当鼠标经过时应停止移动 鼠标移开移动继续

最后 移动到结束位置后div消失 漂浮结束

三、代码实现：

html页面引入CSS和JS文件 如下：

<link rel="stylesheet" type="text/css" href="css/demo.css"/>
                        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
                        <script type="text/javascript" src="js/demo.js"></script>

注：jquery-1.8.2.min.js为Jquery的库文件 需要读者去官网下载

html页面主要代码 如下：

<div id="d1"><a href="http://www.baidu.com"><img src="data:image/1.jpg"></a></div>

注：div中是一个带有链接的图片 点击链接到百度的首页 根据需求可任意修改图片和链接位置

样式demo.css文件中内容 如下：

#d1{
                             height:200px;
                             width:200px;
                             position:absolute;
                            }

注：position：absolute代表绝对定位 目的是使id=”d1”的div脱离文档流

JS代码文件demo.js中代码如下:

$(function(){

/*鼠标离开id="d1"的div执行以下操作*/
                          $("#d1").mouseout(function(){
                                                      $(this).animate({
                                                                  left:'800px',
                                                                  top:'500px'},10000,function(){
                                                                  $("#d1").animate({top:'0px',left:'1150px'},10000,function(){$("#d1").slideUp();});
                                                                                    });
                                               });
                   /*鼠标经过id="d1"的div时执行以下操作*/
                                               $("#d1").mouseover(function(){
                                                                $(this).stop(true);
                                                                                         });

});

注：mouseout和mouseover分别是Jquery的两个事件 用于鼠标移开和经过调用的function（）方法，其中animate()为动画事件

四、总结： 

Jquery提供了丰富的内容 使我们可以不用做一个flash动画就可以实现具有动画效果的网页 ，本篇博文就是做了一个简单的漂浮效果

还有很多不足的地方 欢迎各路大神留言指正。