欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery實(shí)現(xiàn)的兼容性浮動(dòng)層示例

 更新時(shí)間：2016年08月02日 09:16:30   作者：Quber  
這篇文章主要介紹了jQuery實(shí)現(xiàn)的兼容性浮動(dòng)層,可兼容IE、火狐等主流瀏覽器,涉及jQuery針對頁面元素的運(yùn)算與屬性的動(dòng)態(tài)設(shè)置相關(guān)技巧,需要的朋友可以參考下

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

運(yù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浮動(dòng)層</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>

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

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • jquery,js簡單實(shí)現(xiàn)類似Angular.js雙向綁定

    jquery,js簡單實(shí)現(xiàn)類似Angular.js雙向綁定

    本文主要介紹了jquery,js簡單實(shí)現(xiàn)類似Angular.js雙向綁定的方法。具有一定的參考價(jià)值，下面跟著小編一起來看下吧
    2017-01-01
  • jquery插件制作 表單驗(yàn)證實(shí)現(xiàn)代碼

    jquery插件制作 表單驗(yàn)證實(shí)現(xiàn)代碼

    今天的內(nèi)容是關(guān)于表單驗(yàn)證插件的制作。表單驗(yàn)證控件實(shí)現(xiàn)的主要功能是，當(dāng)表單提交的時(shí)候檢查必填項(xiàng)是否正確填寫，同時(shí)根據(jù)需要驗(yàn)證輸入信息是否符合規(guī)范
    2012-08-08
  • jQuery插件Echarts實(shí)現(xiàn)的雙軸圖效果示例【附demo源碼下載】

    jQuery插件Echarts實(shí)現(xiàn)的雙軸圖效果示例【附demo源碼下載】

    這篇文章主要介紹了jQuery插件Echarts實(shí)現(xiàn)的雙軸圖效果,結(jié)合完整實(shí)例形式分析了Echarts插件制作雙軸圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
    2017-03-03
  • jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼

    jQuery中使用Ajax獲取JSON格式數(shù)據(jù)示例代碼

    有時(shí)候我們需要讀取JSON格式的數(shù)據(jù)文件，在jQuery中可以使用Ajax或者 $.getJSON()方法實(shí)現(xiàn)，下面有個(gè)不錯(cuò)的示例，需要的朋友可以參考下
    2013-11-11
  • jquery實(shí)現(xiàn)的一個(gè)導(dǎo)航滾動(dòng)效果具體代碼

    jquery實(shí)現(xiàn)的一個(gè)導(dǎo)航滾動(dòng)效果具體代碼

    首頁有一個(gè)導(dǎo)航頁面要實(shí)現(xiàn)滾動(dòng)效果，索性就仿造別人的效果自己做了一個(gè)，大體上還行，看起來還是比較流暢的,現(xiàn)滾動(dòng)效果，腳本代碼如下，感興趣的朋友可以參考下
    2013-05-05
  • Jquery中dialog屬性小記

    Jquery中dialog屬性小記

    Jquery中dialog屬性小記，使用jquery dialog的朋友可以參考下。
    2010-09-09
  • JQuery實(shí)現(xiàn)Table的tr上移下移功能

    JQuery實(shí)現(xiàn)Table的tr上移下移功能

    這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)Table的tr上移下移功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-02-02
  • jQuery選擇器全集詳解

    jQuery選擇器全集詳解

    本文結(jié)合圖文代碼，基本上將所有的jQuery選擇器都講解了一遍，非常的詳盡，希望對大家能有所幫助。
    2014-11-11
  • jQuery之字體大小的設(shè)置方法

    jQuery之字體大小的設(shè)置方法

    本篇文章主要是對jQuery 字體大小的設(shè)置方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2014-02-02
  • jquery的$().each和$.each的區(qū)別

    jquery的$().each和$.each的區(qū)別

    今天小編就為大家分享一篇關(guān)于jquery的$().each和$.each的區(qū)別，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
    2019-01-01

最新評論