js让div漂浮在页面底部解决方法-JavaSript-爱易网页

js让div漂浮在页面底部解决方法

日期：2014-05-16　浏览次数：20390 次

js让div漂浮在页面底部
我网上找了js让div漂浮在页面底部的实现，很多都是说

JScript code


<script type="text/javascript" defer>
    var adv = document.getElementById("bottomnav");
    adv.scrollTop = adv.scrollHeight;
</script>

<div id="bottomnav"><a href="#top">返回顶部</a></div>
我照写了那段js但是都实现不了让此div漂浮到页面底部？什么原因呢

------解决方案--------------------
那你这样好了：

HTML code

<!--[if IE 6]> 
<script type="text/javascript">

function gotop()
{
    var o=document.getElementById("bottomnav");
    o.style.position='absolute';//变更其定位方式
    //获取顶离偏移量 
    var top= document.documentElement?(document.documentElement.scrollTop || 0):(document.body.scrollTop || 0);
    top = Math.max(top, (window.scrollY || 0));
    top+= document.documentElement?(document.documentElement.clientHeight || 0):(document.body.clientHeight || 0);
    //获取左边偏移量
    var left= document.documentElement?(document.documentElement.clientWidth || 0):(document.body.clientWidth || 0);
    //设置
    o.style.left=left-70+'px';
    o.style.top=top-20+'px';
}
window.attachEvent?window.attachEvent("onscroll",gotop):window.addEventListener("scroll",gotop,false);
</script>
<![endif]-->

------解决方案--------------------
[code=JScript][/code]
<html>
<head>
<title>example</title>
<script language="javascript">
var sunX=0;
var sunY=0;
var directX=1;
var directY=1;
function dotaMove(){
	sunX+=directX;
	sunY+=directY;

	dota.style.top=sunY+"px";
	dota.style.left=sunX+"px";

	if(sunX+dota.offsetWidth>=document.body.clientWidth||sunX<=0){
		directX=-directX;
	}
	if(sunY+dota.offsetHeight>=document.body.clientHeight||sunY<=0){
		directY=-directY;
	}
}

setInterval("dotaMove()",5);
</script>
</head>
<body style="background-image:url('imgs/beijing.jpg');">
<div id="dota" style="position:absolute"><img src="imgs/d1.jpg"></div>
</body>
</html>

写了个简单的漂浮，当div碰到边框的时候就弹回继续漂浮。去运行下吧！！！好的话给点分。

------解决方案--------------------
申明当前页面的W3c标准是 XHTML
如果你其他的样式什么的设置没有遵循这个标准，就会出现你说的，乱掉

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js让div漂浮在页面底部解决方法

相关资料更多>

推荐阅读更多>