Jquery--仿製360右下角彈出窗口

先發瀏覽器效果圖，給大家看。

要實現這樣的效果，按照思路，第一步，寫好CSS佈局，將圖片放到瀏覽器右下角的位置

CSS代碼很靈活，我寫的只是簡單的一種而已，僅供參考：

<style type="text/css">
body{margin:0;
      padding:0;
      height:100%;
      overflow:auto;
      }
.bottomshow{
     position:fixed;
     bottom:-320px;
     right:0;
     width:522px;/*圖片的寬度*/
     height:320px;/*圖片的高度*/}
</style>

第二步，要考慮寫Jquery動畫，其實我首先想到的是將.bottomshow這個DIV給出style=“display：none”，然後在Jquery（.bottomshow）.show('slow')但是這種方式無法改變動畫出來的方向，於是我放棄了。隨後選着了animate()先將bottom默認設置爲-320px剛好是圖片的高度，所以圖片就在瀏覽器的下部的外面，這時候通過animate（{bottom：‘0px’}，‘slow’）就做到了從下往上彈出360效果，Jquery代碼如下，

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加載完畢.
function showbottom(){
                     $(".bottomshow").animate({bottom:"0px"},'slow');

    }
$(document).ready(function(){
                           setTimeout('showbottom()',3000);      
                           })
</script>

第三步就要考慮廣告是可以關閉的，點擊圖片右上角的X就可以關閉，這時候就要用到 img  map click了。具體用法請參考代碼理解：

img map：

<div class="bottomshow">
<img src="images/360.jpg" border="0" usemap="#planetmap" />
<map name="planetmap" id="planetmap">
  <area shape="rect" coords="450,0,520,20" href="javascript:void(0)" onclick="bottomclose()" alt="Sun" />
</map>
</div>

加入href主要是讓鼠標放上去變手型，map加上style=“cursor：pointer“是不起作用的。

之後在寫close（）：

function bottomclose(){
                     $(".bottomshow").animate({bottom:"-320px"},'slow');
    }

最後如果圖片廣告需要跳轉鏈接，只需要Jquery選擇到此圖片加入onclick鏈接即可。
代碼尚不成熟，歡迎吐槽。