关于浮动DIV

Click_Me 2009-05-06 11:59:17



<!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> Test Property </title>

  <meta name="generator" content="editplus" />

 </head>



 <body>

  <script type="text/javascript">

  <!--

		

	var isIE = (document.all) ? true : false;



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



	var $ = function(sId){

		return "string" == typeof(sId) ? document.getElementById(sId) : sId;

	}



	var Bind = function(object, fun){

		return function() {

			return fun.apply(object, arguments);

		}

	}



	function addEventHandler(oTarget, sEventType, fnHandler){

		if(oTarget.addEventListener){

			oTarget.addEventListener(sEventType, fnHandler, false);

		}else if(oTarget.attachEvent){

			oTarget.attachEvent("on" + sEventType, fnHandler);

		}else{

			oTarget["on" + sEventType] = fnHandler;

		}

	 }



	 var isSafa = (window.openDatabase) ? true : false;



	 var TestProper = function(){

		

	 };



	 TestProper.prototype = {

		 // 创建广告

		 CreateBanner: function(){

			document.write("<div id='crazy_bannerleft' style='width:90px;border:2px solid red;height:240px;z-index:12299;onMouseDown='return false;'></div>");

			document.write("<div id='crazy_bannerright' style='width:90px;height:240px;border:2px solid red;z-index:12299;onMouseDown='return false;'></div>");

			this.LeftBanner = $("crazy_bannerleft");

			this.RightBanner = $("crazy_bannerright");

		 },



		 // 设置条幅的滚动程序

		 SetBannerFixed: function(){

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

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

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

				$("crazy_bannerleft").style.left = (d.scrollLeft)+"px"; 

		 },



		 Init: function(){

			// Safari不进行操作

			if(!!isSafa)  return;

			var $d = document.compatMode == "BackCompat" ? d = document.body : d = document.documentElement;

			this.CreateBanner();

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

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

			if(isIE6) {

				addEventHandler(window, "scroll", this.SetBannerFixed);

			}

			addEventHandler(window, "load", this.SetBannerFixed);

			addEventHandler(window, "resize", this.SetBannerFixed);		

		 } 

	 }



	 var Test = new TestProper();

	 Test.Init();

  //-->

  </script>

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

 </body>

</html>

要求很简单，就是让两个DIV一直浮动在页面左右的最底端。
现在的代码在IE6和Chrome浏览器下测试没问题但在FF下测试有问题，就是在页面resize的时候 DIV会消失

请朋友们指点下。

有时间的再看下
http://topic.csdn.net/u/20090505/16/f63f9830-a4b6-4ab5-ba41-ba70fcdb471b.html?seed=630934394&t=fudgtzhb

...全文

279 25 打赏收藏转发到动态举报

写回复

用AI写文章

25 条回复

切换为时间正序

请发表友善的回复…

发表回复

Click_Me 2009-05-06

打赏
举报

我晕是我问题太难还是确实没高手？两个贴子没有回复。。。

xiongzhijian 2009-05-06

打赏
举报

学习

cloudgamer 2009-05-06

打赏
举报

this.isMaxFixed && addEventHandler(window, "scroll", Bind(this,this._fixed,"dddd"));
这样应该也可以

Click_Me 2009-05-06

打赏
举报

哦了自己解决了



		if(isIE6) {

					this.isMaxFixed && addEventHandler(window, "scroll", (function(obj){

						return function(){

							oThis._fixed(obj);

						}

					})(this.Container));			

				}

也真繁琐。。。

Click_Me 2009-05-06

打赏
举报

哦刚才写漏了

发现问题所在了



this.isMaxFixed && addEventHandler(window, "scroll", this._fixed("dddd")); 

//this._fixed("dddd")这样是不可以的 因为addEventHandler只能传句柄this._fixed

是不是应该怎样 弄个闭包解决？

cloudgamer 2009-05-06

打赏
举报

this._fixed = Bind(this, function(x){this.isCenter ? this.SetCenter() : this.SetFixed(x);})
你要把参数传进去嘛

Click_Me 2009-05-06

打赏
举报

但是我传了之后

this._fixed = Bind(this, function(){this.isCenter ? this.SetCenter() : this.SetFixed();})

this.isMaxFixed && addEventHandler(window, "scroll", this._fixed("dddd"));

SetFixed: function(obj){
alert(obj)

}

打印的是undefined

whb850718 2009-05-06

打赏
举报

正确

cloudgamer 2009-05-06

打赏
举报

对

Click_Me 2009-05-06

打赏
举报



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)));

    }

}



SetFixed: function(obj){

	alert(obj)

	

}



this._fixed = Bind(this, function(){this.isCenter ? this.SetCenter() : this.SetFixed();})



this._fixed(Object);

这样用么？

cloudgamer 2009-05-06

打赏
举报

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)));

	}

}

用这个bind就可以了

Click_Me 2009-05-06

打赏
举报

cloudgamer

就这个地方问你个问题关于Bind





this._bannerfixed = Bind(this, function(){this.SetBannerFixed();})

// 如果 我想调用this._bannerfixed(obj)并且 想传个object对象 给SetBannerFixed()应该怎么去写

Click_Me 2009-05-06

打赏
举报

[Quote=引用 13 楼 chinmo 的回复:]
呵呵，就单单这个帖子你看你说的
一会FF一会IE6的

能不晕吗？
[/Quote]

主要问题太多问不过来。。。。

一把编程的菜刀 2009-05-06

打赏
举报

呵呵，就单单这个帖子你看你说的
一会FF一会IE6的

能不晕吗？

Click_Me 2009-05-06

打赏
举报

[Quote=引用 9 楼 cloudgamer 的回复:]
但你问的不是ff吗
怎么变成ie6了
[/Quote]

cloudgamer 不好意思刚才你改完后我知道问题所在了。。
刚才问的IE6问题我自己解决了。

主要现在要兼容所有浏览器，所以上一个贴子的问题还有小毛病

Click_Me 2009-05-06

打赏
举报

[Quote=引用 10 楼 chinmo 的回复:]
哈哈，我也都被他问晕了
之前他还说的是FF好的，IE6有问题

到这里也一会FF一会IE6的
[/Quote]

我的两张贴子问的明显不是一个问题。

一把编程的菜刀 2009-05-06

打赏
举报

哈哈，我也都被他问晕了
之前他还说的是FF好的，IE6有问题

到这里也一会FF一会IE6的

cloudgamer 2009-05-06

打赏
举报

但你问的不是ff吗
怎么变成ie6了

Click_Me 2009-05-06

打赏
举报

wtcsy
嗯左下简单的我主要是试了下fixed的用法

你帮我看下7楼的要求

Click_Me 2009-05-06

打赏
举报

cloudgamer

现在我的问题是左右两个DIV 不一定都是在最下边的

我想实现 TOP值可以自己调节那样IE6下滚动时应该怎么计算比如我让左DIV 的TOP值为60px

而div的浮动布局问题在页面设计又是比较重要的，现自己学习总结了一下，供大家学习交流。首先初始我们定义了6个div，它们的class是这样的，div、div1、div2、div3、div4、div5，它们的高度是一样的。都是200px。接...

示例（黄色框）为可以关闭的浮动div 可以在里面添加<span>, <button>等，灵活实现想要的效果源码 <html> <head> <title>可移动、可关闭的div浮动层</title> <meta ...

之前我们知道了一个div块只能自己独占一行，但是通过浮动设置我们可以使多个不同的块处于同一行浮动设置浮动案例实现一、浮动设置 div块标签的css样式实现是通过选择器实现的，我们在选择器中使用float属性达到...

DIV+CSS布局 - 浮动布局首先呢，div可以理解为一个简单的容器、盒子。就是可以往里面填充内容的东西咱们先看一下原本的，没有使用过浮动的html页面样子： 1.浮动全部靠拢 float：left 取消掉小div的宽度，并且...

JavaScript

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章