关于定位

Click_Me 2009-08-08 03:29:22
要求:让浮标始终处于页面右下角
现象:IE6下用的absolute定位,其余浏览器用的fixed定位.页面加载时候显示对的.
但当双击窗口触发onresize事件的时候,IE6下定位是正常的.但IE8,FF下当把滚动条滚到最下面然后触发onresize的时候.
浮标不见了.估计是fixed定位的原因.大家帮看下.


<!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> new document </title>

 </head>



 <body>

 <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/>

 <script type="text/javascript">

var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };



var isIE = navigator.userAgent.indexOf('MSIE') != -1;



var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == "6");



var addEvent = function(otarget, stype, fnhandler){

	otarget.attachEvent ? otarget.attachEvent("on"+stype, fnhandler) : otarget.addEventListener(stype, fnhandler, false);

}



var CurrentStyle = function(element){

	return element.currentStyle || element.ownerDocument.defaultVeiw(element, null);

}



var Bind = function(object, fun){

	var args = Array.prototype.slice.call(arguments).slice(2);

	return function(){

		return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));

	}

}



var Extend = function(distination, source){

	for(var property in source){

		distination[property] = source[property];

	}

	return distination;

}



var Class = {

	create: function(){

		return function(){

			this.initialize.apply(this, arguments);

		}

	}

}





var ShortMsg = Class.create();

ShortMsg.prototype = {

	initialize: function(msgbox, options){

		this.MsgBox = $(msgbox);

		this.SetOptions(options);

		this._step = this.options.Step;

		this._speed = this.options.Speed;

		this._timer = null;

		this.count = 0;

	},



	SetOptions: function(options){

		this.options = {

			Step:		2,

			Speed:		50	

		};

		Extend(this.options, options || {});

	},



	ShowMsgBox: function(){

		

		var $d = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body;

		this.MsgBox.style.left = ($d.scrollLeft + $d.clientWidth - this.MsgBox.offsetWidth) + "px";

		this.MsgBox.style.top = ($d.scrollTop + $d.clientHeight - this.MsgBox.offsetHeight) + "px";

	},



	Init: function(){	

		this.MsgBox.style.position = !isIE6 ? "fixed" : "absolute";

		this.MsgBox.style.display = "block";

		if(isIE6){

			addEvent(window, "scroll", Bind(this,this.ShowMsgBox));

		}		

		addEvent(window, "resize", Bind(this,this.ShowMsgBox));

		this.ShowMsgBox();

	}



}



</script>

<div style="width:200px;height:120px;border:1px solid red;display:none" id="msgbox"> this is a message </div>

<script type="text/javascript">

<!--

	var SM = new ShortMsg('msgbox');

	SM.Init();

//-->

</script>

 </body>

</html>

...全文
151 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
wtcsy 2009-08-08
  • 打赏
  • 举报
 回复
这个 嘿嘿
弄错了
不需要这么搞
fixed 定位的关系 只需要取可视范围就行了
Math.max($d.clientWidth,$d.scrollLeft) =======>$d.clientWidth

Math.max($d.clientWidth,$d.scrollLeft)是在ie6下做lightbox效果 计算最大范围用的
这里用不着
好象也不是 $d.scrollLeft 应该是$d.scrollWidth

cloudgamer的boke里有介绍几个范围的东西 写的挺详细 可以去看看
lightbox文章里面!~
Click_Me 2009-08-08
  • 打赏
  • 举报
 回复 


可以说下Math.max($d.clientWidth,$d.scrollLeft)为什么在FF要这么用呢?
wtcsy 2009-08-08
  • 打赏
  • 举报
 回复
只在ff3下测试了 ie 8 没有!~
<!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> new document </title>

 </head>



 <body>

 <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/>

 <script type="text/javascript">

var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };



var isIE = navigator.userAgent.indexOf('MSIE') != -1;



var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == "6");



var addEvent = function(otarget, stype, fnhandler){

    otarget.attachEvent ? otarget.attachEvent("on"+stype, fnhandler) : otarget.addEventListener(stype, fnhandler, false);

}



var CurrentStyle = function(element){

    return element.currentStyle || element.ownerDocument.defaultVeiw(element, null);

}



var Bind = function(object, fun){

    var args = Array.prototype.slice.call(arguments).slice(2);

    return function(){

        return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));

    }

}



var Extend = function(distination, source){

    for(var property in source){

        distination[property] = source[property];

    }

    return distination;

}



var Class = {

    create: function(){

        return function(){

            this.initialize.apply(this, arguments);

        }

    }

}





var ShortMsg = Class.create();

ShortMsg.prototype = {

    initialize: function(msgbox, options){

        this.MsgBox = $(msgbox);

        this.SetOptions(options);

        this._step = this.options.Step;

        this._speed = this.options.Speed;

        this._timer = null;

        this.count = 0;

    },



    SetOptions: function(options){

        this.options = {

            Step:        2,

            Speed:        50    

        };

        Extend(this.options, options || {});

    },



    ShowMsgBox: function(){

        var $d = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body;

        if(isIE6)

		{

			this.MsgBox.style.left = ($d.scrollLeft + $d.clientWidth - this.MsgBox.offsetWidth) + "px";

			this.MsgBox.style.top = ($d.scrollTop + $d.clientHeight - this.MsgBox.offsetHeight) + "px";

        }

		else

		{

			this.MsgBox.style.left = (Math.max($d.clientWidth,$d.scrollLeft) - this.MsgBox.offsetWidth) + "px";

			this.MsgBox.style.top = (Math.max($d.clientHeight,$d.scrollTop) - this.MsgBox.offsetHeight) + "px";		

		}



    },



    Init: function(){    

        this.MsgBox.style.position = !isIE6 ? "fixed" : "absolute";

        this.MsgBox.style.display = "block";

        if(isIE6){

            addEvent(window, "scroll", Bind(this,this.ShowMsgBox));

        }        

        addEvent(window, "resize", Bind(this,this.ShowMsgBox));

        this.ShowMsgBox();

    }



}



</script>

<div style="width:200px;height:120px;border:1px solid red;display:none" id="msgbox"> this is a message </div>

<script type="text/javascript">

<!--

    var SM = new ShortMsg('msgbox');

    SM.Init();

//-->

</script>

 </body>

</html>

Click_Me 2009-08-08
  • 打赏
  • 举报
 回复
继续等答案
now00000 2009-08-08
  • 打赏
  • 举报
 回复
推荐用JQUERY做~~~浏览器兼容
Click_Me 2009-08-08
  • 打赏
  • 举报
 回复
有人没
CSS中关于定位position的问题,blockquote,div,span三个的区别
CSS中关于定位position的问题，定位共分为四种：1.static 无特殊定位，对象遵循HTML定位规则,2.absolute 绝对定位，如果父元素有使用定位，则是相对于父元素的坐标进行绝对定位;否则相对于浏览器的边界（或者说文档...
Css中关于定位的理解，相对定位、绝对定位、浮动定位
Css中的定位网页制作中扮演着举足轻重的角色，通过定位，可以轻松的使快元素放置在合适的位置。定位分为三种，绝对定位、相对定位、浮动定位。绝对定位会使同级元素重新从（0,0）坐标开始定位。相对定位会考虑同级...
关于百度地图GPS/IP定位的相关说明
摘要：关于定位，分为GPS定位和网络定位2种。GPS定位，精度较高，可达到10米，但室内不可用，且超级费电。网络定位，分为wifi定位和基站定位，都是通过获取wifi或者基站信息，然后查询对应的wifi或者基站位置数据库...
关于定位中left和right，top和bottom的权重问题
关于定位中left和right，top和bottom的权重问题 在共同类中设置了定位并且设置了left等定位，如果你引用这个类并加入其他的类中也有left和right等定位，那么你设置的right...
CSS相对定位，固定定位，绝对定位
首先了解一下定位的概念：在CSS中关于定位的内容是：position:relative | absolute | static | fixed。static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。在文本流中，任何一个元素都被文本...
JavaScript

87,907

社区成员

224,614

社区内容

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

加载中

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

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

+ 用AI写文章