jQuery实现的兼容性浮动层示例


Posted in Javascript onAugust 02, 2016

本文实例讲述了jQuery实现的兼容性浮动层。分享给大家供大家参考,具体如下:

运行效果截图如下:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery浮动层</title>
  <style type="text/css">
    #test
    {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 430px;
      height: 300px;
      background: #EEF2FB;
      color: Black;
      font-size: 13px;
      margin-top: 50px;
      left: 50%;
      margin: 0px 0 0 -215px;
      text-align: center;
      font-size: 16px;
      border: 1px dotted green;
    }
  </style>
  <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
  <script type="text/javascript" language="javascript">
    $(document).ready(function () {
      var menuYloc = $("#test").offset().top;
      var menuXloc = $("#test").offset().right;
      $(window).scroll(function () {
        var offsetTop = menuYloc + $(window).scrollTop() + "px";
        $("#test").animate({
          top: offsetTop
        }, {
          duration: 600, queue: false
        });
      });
    });
  </script>
</head>
<body>
  <div>
    <div id="test">
      我就是悬浮的DIV区域<br />
      兼容:Test ie6+,firefox3.0</div>
  </div>
  <div style="height: 5000px;">
  </div>
</body>
</html>

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

Javascript 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
Vue键盘事件用法总结
Apr 18 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 #Javascript
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
Aug 02 #Javascript
基于Vue.js实现数字拼图游戏
Aug 02 #Javascript
js 获取范围内的随机数实例代码
Aug 02 #Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 #Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 #Javascript
基于jQuery实现表格的查看修改删除
Aug 01 #Javascript
You might like
Yii2实现log输出到file及database的方法
2016/11/12 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
基于jQuery试卷自动排版系统
2010/07/18 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
python实现RSA加密(解密)算法
2016/02/17 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python3使用GUI统计代码量
2019/09/18 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python如何发送与接收大型数组
2020/08/07 Python
python openCV自制绘画板
2020/10/27 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
kfc实习自我鉴定
2013/12/14 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
锦旗标语大全
2014/06/23 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
公安机关起诉意见书
2015/05/20 职场文书
小学体育教学随笔
2015/08/14 职场文书
导游带团欢迎词
2015/09/30 职场文书
话题作文之成长
2019/12/09 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL