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 相关文章推荐
JavaScript基本对象
Jan 11 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
JavaScript实现简单的日历效果
Sep 25 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
Jan 15 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 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
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
编写Python的web框架中的Model的教程
2015/04/29 Python
python实现一次创建多级目录的方法
2015/05/15 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
python基础梳理(一)(推荐)
2019/04/06 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
Python callable内置函数原理解析
2020/03/05 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
单身旅行者的单身假期:Just You
2018/04/08 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
设计总监岗位职责
2013/12/07 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
投标售后服务承诺书
2015/04/29 职场文书
山楂树之恋观后感
2015/06/11 职场文书
深入理解pytorch库的dockerfile
2022/06/10 Python
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers