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 相关文章推荐
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
js设置document.domain实现跨域的注意点分析
May 21 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
深入理解javascript中的this
Feb 08 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
PHP Error与Logging函数的深入理解
2013/06/03 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
Python 文件读写操作实例详解
2014/03/12 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
什么是Python变量作用域
2020/06/03 Python
python简单实现插入排序实例代码
2020/12/16 Python
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
幼儿园教师培训方案
2014/02/04 职场文书
初三班主任寄语大全
2014/04/04 职场文书
档案工作汇报材料
2014/08/21 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
个人先进事迹总结
2015/02/26 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书