Jquery--仿制360右下角弹出窗口
来源:互联网 发布:177pic info新域名 编辑:程序博客网 时间:2024/06/17 02:21
先发浏览器效果图,给大家看。
要实现这样的效果,按照思路,第一步,写好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链接即可。
代码尚不成熟,欢迎吐槽。
0 0
- Jquery--仿制360右下角弹出窗口
- jQuery插件(右下角弹出窗口)
- 网页右下角弹出窗口
- 页面右下角弹出窗口
- 右下角弹出提示窗口
- 右下角弹出窗口
- js右下角弹出窗口
- extjs 右下角弹出窗口
- xpages 右下角弹出窗口
- C# 右下角弹出窗口
- jQuery实现弹出居、右下角、左下角窗口效果(一)
- jQuery实现弹出居、右下角、左下角窗口效果(二)
- jquery从右下角弹出窗口,从而给网站做广告。
- 使用jquery实现弹出窗口效果(居中、左下角、右下角)
- jquery 右下角弹出框
- 右下角弹出窗口效果代码
- 弹出右下角JS小窗口
- 右下角弹出窗口小示例
- 汇编基础:二进制和十六进制
- C控制语句--分支和跳转
- ASP.NET学习笔记--自己写的Login.aspx
- ASP.NET学习笔记2--自己写代码绑定Gridview
- C---指针
- Jquery--仿制360右下角弹出窗口
- C--指针数组
- C---通过指针访问数组
- C---数组名作函数参数
- C_数据结构
- C语言练手自己编写学生成绩管理系统
- C_文件读写流
- centos6.4 设置固定IP
- CSS_img标签usemap属性图片中选择区域加入超链接