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連接便可。
代碼尚不成熟，歡迎吐槽。