jQuery實現(xiàn)的兼容性浮動層示例

更新時間：2016年08月02日 09:16:30 作者：Quber

這篇文章主要介紹了jQuery實現(xiàn)的兼容性浮動層,可兼容IE、火狐等主流瀏覽器,涉及jQuery針對頁面元素的運算與屬性的動態(tài)設置相關技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)的兼容性浮動層。分享給大家供大家參考，具體如下：

運行效果截圖如下：

具體代碼如下：

<!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區(qū)域<br />
      兼容：Test ie6+,firefox3.0</div>
  </div>
  <div style="height: 5000px;">
  </div>
</body>
</html>

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery常見經典特效匯總》、《jQuery常用插件及用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery form操作技巧匯總》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結》、《jQuery拖拽特效與技巧總結》、《jquery中Ajax用法總結》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

jQuery插件uploadify實現(xiàn)ajax效果的圖片上傳
本文主要介紹使用jQuery插件uploadify實現(xiàn)ajax效果的圖片上傳的功能，有需要的朋友可以參考一下。
2016-06-06
jQuery插件實現(xiàn)控制網頁元素動態(tài)居中顯示
這篇文章主要介紹了jQuery插件實現(xiàn)控制網頁元素動態(tài)居中顯示,實例分析了jQuery插件的實現(xiàn)與元素動態(tài)顯示的技巧,需要的朋友可以參考下
2015-03-03
jQuery實現(xiàn)彈幕效果
本文主要分享了jQuery實現(xiàn)彈幕效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
jQuery Tools Dateinput使用介紹
對于時間控件我比較喜歡用jQuery-ui的那個，我也比較推薦那個，所以這篇我就不對屬性，函數(shù)，API進行翻譯了
2012-07-07
jQuery Study Notes學習筆記 (二)
jquery簡單選擇器的使用方法。jquery中最基本的東西了。
2010-08-08
jquery批量控制form禁用的代碼
這篇文章介紹了jquery批量控制form禁用的代碼，有需要的朋友可以參考一下
2013-08-08
在jQuery中處理XML數(shù)據(jù)的大致方法
這篇文章主要介紹了在jQuery中處理XML數(shù)據(jù)的大致方法,jQuery是當下人氣最高的JavaScript庫,需要的朋友可以參考下
2015-08-08
jQuery實現(xiàn)圖像旋轉動畫效果
jquery動畫旋轉效果在項目中經常遇到這樣的需求，下面小編給大家分享具體實現(xiàn)代碼，感興趣的朋友一起學習吧
2016-05-05
ExtJs動態(tài)生成treepanel的Json格式
這篇文章主要介紹了ExtJs動態(tài)生成treepanel的Json格式的相關資料,需要的朋友可以參考下
2015-07-07
jQuery實現(xiàn)左右兩個列表框的內容相互移動功能示例
這篇文章主要介紹了jQuery實現(xiàn)左右兩個列表框的內容相互移動功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2019-01-01