经过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员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
