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

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

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

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

<style type="text/css">
body{margin:;
padding:;
height:100%;
overflow:auto;
}
.bottomshow{
position:fixed;
bottom:-320px;
right:;
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="data: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链接即可。
代码尚不成熟,欢迎吐槽。

Jquery--仿制360右下角弹出窗口的更多相关文章

  1. jQuery插件---轻量级的弹出窗口wBox

    Box Demo wBox——轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如可img灯箱效果,callback函数,显示隐藏层, ...

  2. jquery Jbox 插件实现弹出窗口在修改的数据之后,关闭弹出窗口刷新父页面的问题

    http://blog.csdn.net/nsdnresponsibility/article/details/51282797 问题如题: 这里我们在父页面定义一个全局的变量来标识是否需要刷新父页面 ...

  3. c# 右下角弹出窗口

    public partial class Form2 : Form { System.Diagnostics.Stopwatch sth = new System.Diagnostics.Stopwa ...

  4. 基于Jquery的原生态dialog弹出窗口-zapWindow

    看到boss系统搓B的填出窗口,不忍直视,坚决的换掉! 采用zapwindow(来源不清楚了,总之是前人留下的),做了修改,当前支持三类弹出类型: 1. 指定url 2. 自定义html 3. 指定D ...

  5. jQuery插件(右下角弹出窗口)

    原文发布时间为:2010-03-07 -- 来源于本人的百度文章 [由搬家工具导入] jQuery插件(右下角弹出窗口) 收藏 源码下载 http://download.csdn.net/source ...

  6. C#实现右下角弹出窗口效果

    /// <summary> /// 窗体动画函数 注意:要引用System.Runtime.InteropServices; /// </summary> /// <pa ...

  7. C# winform 右下角弹出窗口结果

    using System.Runtime.InteropServices; [DllImport("user32")] private static extern bool Ani ...

  8. C# winform实现右下角弹出窗口结果的方法

    using System.Runtime.InteropServices; [DllImport("user32")] private static extern bool Ani ...

  9. C# 在右下角弹出窗口

    窗口代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Da ...

随机推荐

  1. UVA 1411 - Ants(二分图完美匹配)

    UVA 1411 - Ants 题目链接 题意:给定一些黑点白点,要求一个黑点连接一个白点,而且全部线段都不相交 思路:二分图完美匹配,权值存负的欧几里得距离,这种话,相交肯定比不相交权值小,所以做一 ...

  2. PowerCmd(转)

    PowerCmd 是一款Windows CMD 的增强工具,可以比普通CMD工具提供更多选项,例如: 1.多窗口集成,再也不见满屏的Cmd窗口: 2.命令日志记录,再也不怕命令滚动多快,有多少,我们都 ...

  3. UML 简单的总结

    上某一个地方,总有个记忆挥不散,每一个深夜某一个地方,总有着最深的思量- 都说岁月无情人有情,记忆easy催人老,可有时候反倒觉着人比岁月更无情.岁月留下了我们成长的印记,但是有时候以前认为会相伴永远 ...

  4. 合理设置MTU,提升下载速度

    可能很少有雷友注意过“本机.网络”的“MTU”值对自己网络性能产生的影响.对于追求更快的下载速度来说,MTU值设置不当,就仿佛穿着高跟鞋跑步一般. MTU是什么? “MTU=最大传输单元 单位:字节” ...

  5. JAVA在IO流量汇总

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42119261 我想你对JAVA的IO流有所了解,平时使用的 ...

  6. JSTL实现int数据的类型的长度

    JSTL否int类型转换string该功能.为了解决增益int数据的类型的长度,闹失踪. 得到String的数据的长度是jstl的fn能够${fn:length(string)},但int做数据? 经 ...

  7. Visual Studio Team Services使用教程--Readers tfs组checkin权限修改

    你也可以只开启部分代码的权限 把上面开启的整个应用的权限先去掉 只开启一个文件的权限

  8. MPC8313ERDB不新鲜pkg包裹,把文件放进Ramdisk

    MPC8313ERDB不新鲜pkg包裹,把文件放进Ramdisk 经ltib编译器生成rootfs.ext2.gz.uboot它可以直接uboot采用.假设我们编写了相应的外部文件把Ramdisk往里 ...

  9. css整理 background-size优化

    font-size:12px; line-height:22px; font-family:Arial,Helvetica,sans-serif; /*优化*/ font:12px/22px Aria ...

  10. ubuntu经常使用的命令摘要

    1.df命令 # df -ha 显示所有文件和分区的使用 # df -h /dev/sda1 显示sda1磁盘使用率 # df -T 显示文件系统名称属于每个分区.区的格式类型(比方ext3) 注:h ...