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 相关文章推荐
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
javascript读写json示例
Apr 11 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
JS交换变量的方法
Jan 21 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 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
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
表单提交验证类
2006/07/14 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
Python中%r和%s的详解及区别
2017/03/16 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
python实现udp聊天窗口
2020/03/31 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Python中的全局变量如何理解
2020/06/04 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
优秀应届生推荐信
2013/11/09 职场文书
入党自我评价范文
2014/02/02 职场文书
八年级语文教学反思
2014/02/11 职场文书
给校长的建议书
2014/03/12 职场文书
低碳环保标语
2014/06/12 职场文书
党校党性分析材料
2014/12/19 职场文书
奖励通知
2015/04/22 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android