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链接即可。
代码尚不成熟，欢迎吐槽。