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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
javascript中的几个运算符
Jun 29 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
简单的JS轮播图代码
Jul 18 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
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手册及PHP编程标准
2006/12/17 PHP
php桌面中心(三) 修改数据库
2007/03/11 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
js转义字符介绍
2013/11/05 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
react-router实现跳转传值的方法示例
2017/05/27 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
ionic2自定义cordova插件开发以及使用(Android)
2017/06/19 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python的turtle库使用详解
2019/05/10 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
电子信息专业学生自荐信
2013/11/09 职场文书
微信营销策划方案
2014/02/24 职场文书
王老吉广告词
2014/03/20 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
初中政治教师教学反思
2016/02/23 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书