浮动div

jianshao810 2010-01-12 07:08:22
我现在有一个div。
想无论页面最大化，或者缩小 ，
都让这个div 可以显示。。像对联一样。
并且是 显示在可见区的最底部.
尤其是滚动的时候也是。。
...全文
119 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
qingYun1029 2010-01-13
  • 打赏
  • 举报
 回复
进来学习学习！
jianshao810 2010-01-13
  • 打赏
  • 举报
 回复
这是整体页面的代码。。但是在傲游里面多滚动几次 这个div 就会丢失。
说找不到对象。。
请问这是什么回事？
首先谢谢
IBM_hoojo
jianshao810 2010-01-13
  • 打赏
  • 举报
 回复 


<html xmlns="http://www.w3.org/1999/xhtml">

<head >

    <title>无标题页</title>





</head>

<body>

    <form id="form1" runat="server">

    <div id='div2009_2010' style="position: absolute; bottom: 0; right: 5px; width: 240px; height: 165px;">

    <span style=" float:right; width:100%; text-align:right; position:absolute;">  <a href="javascript:void(0);" style=" color:Yellow; font-weight:bold;"  onclick='javascript:parentElement.parentElement.style.display="none";' >关闭 X</a></span>

        <a href="/2009-2010/2009-2010meeting.html" target="_blank">

            <img src='2009-2010/rb2.jpg' alt='' /></a>

    </div>

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    <br />

    </form>



    <script language="JavaScript">

        var s = "";

        s += "\r\n网页可见区域宽：" + document.body.clientWidth;

        s += "\r\n网页可见区域高：" + document.body.clientHeight;

        s += "\r\n网页可见区域宽：" + document.body.offsetWidth + " (包括边线和滚动条的宽)";

        s += "\r\n网页可见区域高：" + document.body.offsetHeight + " (包括边线的宽)";

        s += "\r\n网页正文全文宽：" + document.body.scrollWidth;

        s += "\r\n网页正文全文高：" + document.body.scrollHeight;

        s += "\r\n网页被卷去的高：" + document.body.scrollTop;

        s += "\r\n网页被卷去的左：" + document.body.scrollLeft;

        s += "\r\n网页正文部分上：" + window.screenTop;

        s += "\r\n网页正文部分左：" + window.screenLeft;

        s += "\r\n屏幕分辨率的高：" + window.screen.height;

        s += "\r\n屏幕分辨率的宽：" + window.screen.width;

        s += "\r\n屏幕可用工作区高度：" + window.screen.availHeight;

        s += "\r\n屏幕可用工作区宽度：" + window.screen.availWidth;

        s += "\r\n你的屏幕设置是 " + window.screen.colorDepth + " 位彩色";

        s += "\r\n你的屏幕设置 " + window.screen.deviceXDPI + " 像素/英寸";

        //alert(s); 

    </script>

    <script type="text/javascript">

        function getPost(ele) {

            var x = 0;

            var y = 0;

            var height = ele.offsetHeight;

            var width = ele.offsetWidth;

            if (ele.offsetParent) {

                while (ele.offsetParent) {

                    x += ele.offsetLeft;

                    y += ele.offsetTop;

                    ele = ele.offsetParent;

                }

                return [x, x + width, y, y + height]

            }

            else {

                return [ele.x, ele.x + width, ele.y, ele.y + height];

            }

        }

        window.onscroll = movepeixun;

        function movepeixun() {

            var sz = GetPageSize();

            var scrollHeight = parseInt(document.body.scrollHeight);

            var div = document.getElementById("div2009_2010");

            if (div) {

                var pos = getPost(div);

                var sl = GetPageScroll();

                if ((sl.Y + parseInt(sz.WinH) - div.offsetHeight) >= scrollHeight) {

                    return;

                }

                div.style.top = sl.Y + parseInt(sz.WinH) - div.offsetHeight + "px";

            }

        }

        window.onresize = window.onscroll;

        window.scroll();

    </script>



    <script type="text/javascript">

        function GetPageSize() {

            var scrW, scrH;

             if (window.innerHeight && window.scrollMaxY) {    // Mozilla   

                scrW = window.innerWidth + window.scrollMaxX; scrH = window.innerHeight + window.scrollMaxY;

            } else if (document.body.scrollHeight > document.body.offsetHeight) {    // all but IE Mac   

                scrW = document.body.scrollWidth; scrH = document.body.scrollHeight;

            } else if (document.body) { // IE Mac  

                scrW = document.body.offsetWidth; scrH = document.body.offsetHeight;

            } var winW, winH; if (window.innerHeight) { // all except IE   

                winW = window.innerWidth; winH = window.innerHeight;

            } else if (document.documentElement && document.documentElement.clientHeight) {    // IE 6 Strict Mode   

                winW = document.documentElement.clientWidth; winH = document.documentElement.clientHeight;

            } else if (document.body) { // other

                winW = document.body.clientWidth; winH = document.body.clientHeight;

            }  // for small pages with total size less then the viewport

            var pageW = (scrW < winW) ? winW : scrW;

            var pageH = (scrH < winH) ? winH : scrH; 

            return { PageW: pageW, PageH: pageH, WinW: winW, WinH: winH };

        }

        //var sz = GetPageSize(); alert([sz.PageW, sz.PageH, sz.WinW, sz.WinH].join(", "));

        function GetPageScroll() {

            var x, y; if (window.pageYOffset) {    // all except IE  

                y = window.pageYOffset; x = window.pageXOffset;

            } else if (document.documentElement && document.documentElement.scrollTop) {    // IE 6 Strict

                y = document.documentElement.scrollTop; x = document.documentElement.scrollLeft;

            } else if (document.body) {    // all other IE   

                y = document.body.scrollTop; x = document.body.scrollLeft;

            } return { X: x, Y: y };

        }



    </script>



</body>

</html>
hoojo 2010-01-12
  • 打赏
  • 举报
 回复
看看这篇文章基本就可以了。
http://www.blabla.cn/js_kb/javascript_pagesize_windowsize_scrollbar.html
minzhong20 2010-01-12
  • 打赏
  • 举报
 回复
什么啊
jianshao810 2010-01-12
  • 打赏
  • 举报
 回复
http://www.narutom.com/
这个里面的是好好的。。
得到div的底部坐标，窗口坐标怎样得到？
我先回家。。。麻烦你解释下
jianshao810 2010-01-12
  • 打赏
  • 举报
 回复
if (scrollTop <= clientHeight)
就是不行。。
还差85px 就到底部。。请问有什么判断方法啊？大侠。。
hoojo 2010-01-12
  • 打赏
  • 举报
 回复
得到div的底部坐标，和窗口的坐标比较。
hoojo 2010-01-12
  • 打赏
  • 举报
 回复
是的啊，你的是绝对底部啦。
这个也是啊 document.body.scrollTop + document.body.clientHeight- document.getElementById("div1").offsetHeight
jianshao810 2010-01-12
  • 打赏
  • 举报
 回复 


 <script type="text/javascript">

        window.onscroll = function() {

            var scrollTop = parseInt(document.body.scrollTop);

            var clientHeight = parseInt(document.body.clientHeight);

            var div = document.getElementById("div2009_2010");

            if (scrollTop <= clientHeight) {

                div.style.top = scrollTop + clientHeight - 165 + "px";

            }

        }

        window.onresize = window.onscroll;

        function init() {

            var df = document.createDocumentFragment();

            for (var i = 0; i < 20; i++) {

                var p = document.createElement("p");

                p.appendChild(document.createTextNode(" Line " + i));

                df.appendChild(p);

            }

            document.body.appendChild(df);

            window.onscroll();

        }

        function show() {

            document.getElementById("message").innerText = document.body.scrollHeight + ":::" + document.body.scrollTop;

            // parseInt(document.body.scrollTop) + parseInt(document.body.clientHeight) - 165 + "px";

        }

    </script>

当他滚动到一定程度，差不多接近底部的时候 div 就不随着动 啦
jianshao810 2010-01-12
  • 打赏
  • 举报
 回复
差不多是我要的效果啦。。
但是我怎样判断是不是 已经滚动到最下面呢？
hoojo 2010-01-12
  • 打赏
  • 举报
 回复
<body>
<div style="position: absolute; bottom: 0;left: 0;">飘吧,左边！</div>
<div style="position: absolute; bottom: 0;right: 0;">飘吧,右边！</div>
</body>
不管是最大化，还是缩小窗口。div都在页面底部。
jianshao810 2010-01-12
  • 打赏
  • 举报
 回复
高手帮帮忙啊。。
jianshao810 2010-01-12
  • 打赏
  • 举报
 回复 


var top;

        var left;

        function peixun() {

            var div = document.getElementById('div2009_2010');

            var docuTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;

            if (docuTop < document.body.clientHeight) {

                div.style.posTop = docuTop + window.screen.availHeight - 330;

            }

        }

        function pp() {



            /*var h1 = window.screen.availHeight - 165;

            if (document.body.clientHeight < h1)

            document.all.t1.style.top = window.screen.availHeight - 165;

            document.write("当前窗口宽：" + document.body.offsetWidth + "；　高：" + document.body.clientHeight + "aaaa" + (window.screen.availHeight));

            */

            var div = document.getElementById('div2009_2010');

            var docuTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;

            div.style.posTop = document.body.clientHeight - 165;

            div.style.posRight = 0;



        }

        pp();

        window.onscroll = peixun;

        window.onresize = pp;

我的代码。。
可关闭的浮动div示例
示例（黄色框）为可以关闭的浮动div 可以在里面添加<span>, <button>等，灵活实现想要的效果 源码 <html> <head> <title>可移动、可关闭的div浮动层</title> <meta ...
关于div的浮动及居中问题
一、如何设置div浮动 设置div的css样式float : left，成功浮动 DIV设置浮动float以后下一个DIV要换行的方法 在原有的样式上添加clear : both，使图像的左侧和右侧均不允许出现浮动； clear 属性定义了元素的哪边上不...
当鼠标放在div中时显示一个浮动div
@{  Layout = null; } <!... div { ... <div id="showmsg" class="mydiv" style="background:#ff0000;...">div1</div> ... <div class="mydiv">div2</div> ... <div class="mydiv">div4</div> 效果图
html span 浮动,确定span元素的绝对定位浮动div的位置
确定span元素的绝对定位浮动div的位置我尝试确定其位置和大小以给出正确的边界以放置浮动div。text atest hello world我试图获得这些信息元素id=test我尝试了两种方法：首先，我得到跨度var span = document....
浅析div的浮动
而div的浮动布局问题在页面设计又是比较重要的，现自己学习总结了一下，供大家学习交流。 首先初始我们定义了6个div，它们的class是这样的，div、div1、div2、div3、div4、div5，它们的高度是一样的。都是200px。 接...
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章