最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery实现右下角弹出窗口效果(告警、提示)
时间:2014-05-28 编辑:简简单单 来源:一聚教程网
要实现这样的效果,按照思路,第一步,写好CSS布局,将图片放到浏览器右下角的位置
CSS代码很灵活,我写的只是简单的一种而已,仅供参考:
代码如下 | 复制代码 |
第二步,要考虑写Jquery动画,其实我首先想到的是将.bottomshow这个DIV给出style=“display:none”,然后在Jquery(.bottomshow).show('slow')但是这种方式无法改变动画出来的方向,于是我放弃了。随后选着了animate()先将bottom默认设置为-320px刚好是图片的高度,所以图片就在浏览器的下部的外面,这时候通过animate({bottom:‘0px’},‘slow’)就做到了从下往上弹出360效果,Jquery代码如下,
代码如下 | 复制代码 |
第三步就要考虑广告是可以关闭的,点击图片右上角的X就可以关闭,这时候就要用到 img map click了。具体用法请参考代码理解:
img map:
代码如下 | 复制代码 |
加入href主要是让鼠标放上去变手型,map加上style=“cursor:pointer“是不起作用的。
之后在写close():
代码如下 | 复制代码 |
function bottomclose(){ $(".bottomshow").animate({bottom:"-320px"},'slow'); } |
最后如果图片广告需要跳转链接,只需要Jquery选择到此图片加入onclick链接即可。
代码尚不成熟,欢迎吐槽。
-
下一个: 谷歌地图插件Mapsed.js使用例子
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31