码迷,mamicode.com
首页 > Web开发 > 详细

Jquery--仿制360右下角弹出窗口

时间:2014-05-29 11:49:18      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   java   


先发浏览器效果图,给大家看。

bubuko.com,布布扣

要实现这样的效果,按照思路,第一步,写好CSS布局,将图片放到浏览器右下角的位置

CSS代码很灵活,我写的只是简单的一种而已,仅供参考:

bubuko.com,布布扣
<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>
bubuko.com,布布扣

第二步,要考虑写Jquery动画,其实我首先想到的是将.bottomshow这个DIV给出style=“display:none”,然后在Jquery(.bottomshow).show(‘slow‘)但是这种方式无法改变动画出来的方向,于是我放弃了。随后选着了animate()先将bottom默认设置为-320px刚好是图片的高度,所以图片就在浏览器的下部的外面,这时候通过animate({bottom:‘0px’},‘slow’)就做到了从下往上弹出360效果,Jquery代码如下,

bubuko.com,布布扣
<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>
bubuko.com,布布扣

第三步就要考虑广告是可以关闭的,点击图片右上角的X就可以关闭,这时候就要用到 img  map click了。具体用法请参考代码理解:

img map:

bubuko.com,布布扣
<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>
bubuko.com,布布扣

加入href主要是让鼠标放上去变手型,map加上style=“cursor:pointer“是不起作用的。

之后在写close():

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

最后如果图片广告需要跳转链接,只需要Jquery选择到此图片加入onclick链接即可。
代码尚不成熟,欢迎吐槽。

Jquery--仿制360右下角弹出窗口,布布扣,bubuko.com

Jquery--仿制360右下角弹出窗口

标签:c   style   class   blog   code   java   

原文地址:http://www.cnblogs.com/tangt/p/3756545.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!