jQuery实现的右下角广告窗体跟随效果示例


Posted in Javascript onSeptember 16, 2016

本文实例讲述了jQuery实现的右下角广告窗体跟随效果。分享给大家供大家参考。具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    body{margin:0px;font-size:12px;}
    #message
    {
      width:100px;
      height:100px;
      position:fixed;
      background-color:gold;
      right:0px;
      bottom:0px;
      display:none;
    }
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      //注意slideDown是展开,slideUp是收起
      $("#message").slideDown(2000, function () {
        //$(this).slideUp(5000);   //花5秒钟收起
        setTimeout("$('#message').slideUp(5000);",2000)   //用定时器等待两秒钟后收起,注意这里不能用$(this),必须用ID取了
      });
    });
  </script>
</head>
<body>
  <div id="message">
    我是广告,不好意思!!
  </div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
layui实现三级导航菜单
Jul 26 Javascript
jQuery实现回到顶部效果
Oct 19 jQuery
JavaScript实现点击图片换背景
Nov 20 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 #Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 #Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 #Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 #Javascript
jQuery中show与hide方法用法示例
Sep 16 #Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 #Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 #Javascript
You might like
Protoss魔法科技
2020/03/14 星际争霸
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
JavaScript修改css样式style
2008/04/15 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[06:16]第十四期-国士无双绝地翻盘之撼地神牛
2014/06/24 DOTA
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python全排列操作实例分析
2018/07/24 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
GC是什么?为什么要有GC?
2013/12/08 面试题
物流仓管员岗位职责
2013/12/04 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
应届生自荐信
2014/06/30 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
python中数组和列表的简单实例
2022/03/25 Python
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers