經過CSS，Jquery實現DIV的各類動做(包括漂移，未測試IE6)
版權聲明： 本文由 一隻博客 發表於 bloghome博客javascript
此文實現了以下效果：html
jquery得到窗口高寬，文檔高寬值。java
經過CSS設置，實現DIV置頂，置底，置左，置右，居中。jquery
利用jquery實現DIV四個方向隨滾動條，窗體大小浮動。瀏覽器
一個漂浮反彈的DIV。ide
<!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>獲取窗口高度寬度，DIV置頂，置底，置左，置右，居中，隨滾動條居中</title> <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { showwidth_height(); $(window).resize(showwidth_height); $(window).scroll(movesmallleft); $(window).resize(movesmallleft); $(window).scroll(movesmallright); $(window).resize(movesmallright); $(window).scroll(movesmalltop); $(window).resize(movesmalltop); $(window).scroll(movesmallbottom); $(window).resize(movesmallbottom); var ivl = setInterval("floatdiv()", 10); //ivl變量，用來可使得setInterval中止。經過clearInterval方法。 $("#floatdiv").hover(function () { clearInterval(ivl) }, function () { ivl = setInterval("floatdiv()", 10); }); }) function showwidth_height() { var s = "" + "瀏覽器當前窗口可視區域高度:" + $(window).height() + "<br/>" + "瀏覽器當前窗口文檔的高度:" + $(document).height() + "<br/>" + "瀏覽器當前窗口文檔body的高度:" + $(document.body).height() + "<br/>" + "瀏覽器當前窗口文檔body的總高度 包括border padding margin :" + $(document.body).outerHeight(true) + "<br/>" + "瀏覽器當前窗口可視區域寬度:" + $(window).width() + "<br/>" + "瀏覽器當前窗口文檔對象寬度:" + $(document).width() + "<br/>" + "瀏覽器當前窗口文檔body的寬度:" + $(document.body).width() + "<br/>" + "瀏覽器當前窗口文檔body的總寬度 包括border padding margin:" + ($(document.body).outerWidth(true)) + "<br/>" $("#center").html(s); } function movesmallleft() { var topvalue = $(window).height() / 2 + $(window).scrollTop(); //滾動條滾動了多少偏移量，就要把這個偏移量加上去。 var leftvalue = 0 + $(window).scrollLeft(); //滾動條滾動了多少偏移量，就要把這個偏移量加上去。 //這裏的stop方法至關必要 //中止正在進行的動畫 //由於滾動條滾動的時候，會觸發屢次scroll事件，每次觸發的時候，都作動畫影響效率，所以要加上stop方法 //使之當即中止後再作動畫。 $("#smallleft").stop().animate({ top: topvalue, left: leftvalue, marginTop: "-10px" }, "slow"); } function movesmallright() { var topvalue = 150 + $(window).scrollTop(); //滾動條滾動了多少偏移量，就要把這個偏移量加上去。 var rightvalue = 0 - $(window).scrollLeft(); //滾動條滾動了多少偏移量，就要把這個偏移量加上去。 $("#smallright").stop().animate({ top: topvalue, right: rightvalue }, "slow"); } function movesmalltop() { var topvalue = 0 + $(window).scrollTop(); //滾動條滾動了多少偏移量，就要把這個偏移量加上去。 var leftvalue = $(window).width() / 2 + $(window).scrollLeft(); //滾動條滾動了多少偏移量，就要把這個偏移量加上去。 $("#smalltop").stop().animate({ top: topvalue, left: leftvalue }, "slow"); } function movesmallbottom() { var bottomvalue = 0 - $(window).scrollTop(); //滾動條滾動了多少偏移量，就要把這個偏移量加上去。 var leftvalue = $(window).width() / 2 + $(window).scrollLeft(); //滾動條滾動了多少偏移量，就要把這個偏移量加上去。 $("#smallbottom").stop().animate({ bottom: bottomvalue, left: leftvalue }, "slow"); } var direct = "leftup"; //根據當前方向和偏移量，判斷接下來的方向。 function floatdiv() { var top = $("#floatdiv").offset().top; var left = $("#floatdiv").offset().left; //加上偏移量，主要用來處理滾動條的滾動時候對top，left的影響 if (top < 0 + $(window).scrollTop() && direct == "rightup") { direct = "rightdown"; } else if (top < 0 + $(window).scrollTop() && direct == "leftup") { direct = "leftdown"; } else if (left < 0 + $(window).scrollLeft() && direct == "leftup") { direct = "rightup"; } else if (left < 0 + $(window).scrollLeft() && direct == "leftdown") { direct = "rightdown"; } //加上div的高度 else if (top + 80 > $(window).height() + $(window).scrollTop() && direct == "leftdown") { direct = "leftup"; } else if (top + 80 > $(window).height() + $(window).scrollTop() && direct == "rightdown") { direct = "rightup"; } //加上div的寬度 else if (left + 80 > $(window).width() + $(window).scrollLeft() && direct == "rightdown") { direct = "leftdown"; } else if (left + 80 > $(window).width() + $(window).scrollLeft() && direct == "rightup") { direct = "leftup"; } if (direct == "leftdown") { toptop = top + 1; leftleft = left - 5; } else if (direct == "rightdown") { toptop = top + 1; leftleft = left + 5; } else if (direct == "rightup") { toptop = top - 1; leftleft = left + 5; } else if (direct == "leftup") { toptop = top - 1; leftleft = left - 5; } $("#floatdiv").html(Date()); $("#floatdiv").offset({ "top": top, "left": left }) } </script> <style type="text/css"> #top { position: fixed; top: 20px; left: 0px; height: 50px; width: 100%; background: #666666; z-index: 6; text-align: center; } #left { position: fixed; top: 50%; left: 10px; height: 300px; width: 100px; background: #666666; z-index: 6; text-align: center; margin-top: -150px; /*由於不是50%不是真正的居中，因此要上移高度的一半*/ } #smallleft { position: absolute; top: 50%; left: 10px; height: 20px; width: 20px; background: red; z-index: 6; text-align: center; margin-top: -10px; /*由於不是50%不是真正的居中，因此要上移高度的一半*/ } #smallright { position: absolute; top: 150px; right: 0px; height: 20px; width: 20px; background: red; z-index: 6; text-align: center; } #smalltop { position: absolute; top: 0px; left: 50%; height: 20px; width: 20px; background: red; z-index: 6; text-align: center; } #smallbottom { position: absolute; bottom: 0px; left: 50%; height: 20px; width: 20px; background: red; z-index: 6; text-align: center; } #floatdiv { position: fixed; top: 200px; left: 300px; height: 80px; width: 80px; background: blue; z-index: 6; text-align: center; } #bottom { z-index: 6; position: fixed; bottom: 0px; background: #666666; height: 50px; width: 100%; text-align: center; } #right { position: fixed; top: 50%; right: 10px; height: 300px; width: 100px; background: #666666; z-index: 6; text-align: center; margin-top: -150px; /*由於不是50%不是真正的居中，因此要上移高度的一半*/ } #center { position: fixed; top: 50%; left: 50%; height: 200px; width: 400px; background: #666666; z-index: 6; text-align: center; margin-top: -100px; /*由於不是50%不是真正的居中，因此要上移高度的一半*/ margin-left: -200px; /*由於不是50%不是真正的居中，因此要左移寬度的一半*/ } </style> </head> <body> <div id="top"> TOP </div> <div id="left"> LEFT </div> <div id="bottom"> BOTTOM </div> <div id="right"> RIGHT </div> <div id="center"> CENTER </div> <div id="smallleft"> </div> <div id="smallright"> </div> <div id="smallbottom"> </div> <div id="smalltop"> </div> <div id="floatdiv"> </div> <div style="height: 1024px; background-color: Silver"> <pre> 絕對定位使元素的位置與文檔流無關，所以不佔據空間。 這一點與相對定位不一樣，相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。 普通流中其它元素的佈局就像絕對定位的元素不存在同樣： 絕對定位的元素的位置相對於最近的已定位祖先元素，若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。 </pre> <table> <tr> <td> absolute </td> <td> <p> 生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。</p> <p> 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。</p> </td> </tr> <tr> <td> fixed </td> <td> <p> 生成絕對定位的元素，相對於瀏覽器窗口進行定位。</p> <p> 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。</p> </td> </tr> <tr> <td> relative </td> <td> <p> 生成相對定位的元素，相對於其正常位置進行定位。</p> <p> 所以，"left:20" 會向元素的 LEFT 位置添加 20 像素。</p> </td> </tr> <tr> <td> static </td> <td> 默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 </td> </tr> <tr> <td> inherit </td> <td> 規定應該從父元素繼承 position 屬性的值。 </td> </tr> </table> </div> </body> </html>
相關文章
- 1. ie6 css 實現fixed漂浮
- 2. jQuery拖動div，移動div，彈出層
- 3. CSS+HTML實現移動端div左右滑動展現
- 4. js實現div移動
- 5. 一款基於jquery ui漂亮的可拖動div實例
- 6. css實現 ： 鼠標移動上去顯示div,移開隱藏div
- 7. ajax的各類用法，包括原生和Jquery
- 8. 經過Unity3D製做天空盒 - 曾經的漂移 - 博客園
- 9. javascript+div+css滾動菜單的實現.
- 10. 動做類測試
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • W3C CSS 活動 - W3C 教程
- • ☆基於Java Instrument的Agent實現
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
歡迎關注本站公眾號,獲取更多信息
