开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 原文:Jquery--仿制360右下角弹出窗口 先发浏览器效果图,给大家看。 要实现这样的效果,按照思路,第一步,写好CSS布局,将图片放到浏览器右下角的位置 CSS代码很灵活,我写的只是简单的一种而已,仅供参考: body{margin:0; padding:0; ...
+关注继续查看
原文: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链接即可。
代码尚不成熟,欢迎吐槽。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery wizard,一款创建步骤向导的插件
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/74926175 这篇文章完全没有技术难度,但我为什么要写呢?因为我想把这么好的一款插件推荐给需要的小伙伴。
1345 0
30个非常流行的提示信息插件(jQuery Tooltip Plugin)
在网站的设计中,提示信息是非常细微的功能,但是起着非常重要的作用。如果你的网站中提示信息做的比较好,会给浏览者留下非常深刻的印象,同时也会起到非常好的网站宣传效果,下面介绍了30个比较流行提示信息插件jQuery Tooltip Plugin,希望对大家有帮助。
757 0
2009 年度最佳 jQuery 插件
jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件。
1215 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
973 0
Jquery 学习笔记(三)240多个jQuery插件
Jquery 学习笔记(三) -240多个jQuery插件 2009年11月30日二 作者:   邦畿千里   概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。
1058 0
Jquery插件
看到了别人的总结的插件,本想一个一个的试,但数量太大,所以……,插件地址直接拷过来,用的时候再说吧文件上传(File upload) Ajax File Upload.jQUploader.Multiple File Upload plugin.
975 0
[Jquery Plugin]Jquery Tabs 插件简介-更友好地组织你的页面
关于Jquery Tab插件,比较流行的是jQuery UI Tabs,最近此插件也已经有了更新,地址为http://stilbuero.de/jquery/tabs_3/ ,目前国内很多网站也在使用此插件,希望大家有时间了试用一下。
1079 0
[jQuery Media Plugin] Jquery 多媒体插件简化多媒体页面编写
jQuery Media Plugin简介:        Jquery Media Plugin是一款页面内容嵌套多媒体的插件。支持的大部分的多媒体播放器和多媒体格式,比如:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF等等。
654 0
[原创]jPagerBar1.2发布-jquery分页插件(一个适合Ajax+JSON+jQuery环境使用的多功能页码栏插件)(Demo、源文件下载已更新)
18个月前发布了jPagerBar1.1.1,受到了很多网友的关心和支持,也收到了很多的意见反馈,在此表示感谢!最近腾出点时间将一些建议整理了一下,结合自己的使用体验,升级了jPagerBar的一部分功能和执行方式。
955 0
+关注
杰克.陈
一个安静的程序猿~
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载