用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="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動畫就可以實現具有動畫效果的網頁 ，本篇博文就是做了一個簡單的漂浮效果

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

      

 

用CSS+Jquery實現一個漂浮的表單