浏览器窗口重置时触发(调整窗口大小,最大化,最小化):resize
<body>
<div id="box"></div>
<script type="text/javascript">
var box=document.getElementById("box");
box.style.position="absolute";
box.style.backgroundColor="red";
box.style.width=w()*0.8+"px";
box.style.height=h()*0.8+"px";
window.οnresize=function(){
box.style.width=w()*0.8+"px";
box.style.height=h()*0.8+"px";
}
function w(){
if(window.innerWidth){//兼容DOM
return window.innerWidth;
}else if(document.body){
return document.body.clientWidth;//兼容IE
}
}
function h(){
if(window.innerHeight){
return window.innerHeight;
}else if(document.body){
return document.body.clientHeight;
}
}
</script>
</body>
控制box始终位于窗口内坐标(100px,100px)
<div id="box"></div>
<div id="ddd" style="width:100px;height:100px;background-color: #0000FF;">
</div>
<div style="height:5000px;width: 5000px;background-color: blueviolet;">
</div>
<script type="text/javascript">
var box=document.getElementById("box");
box.style.position="absolute";
box.style.backgroundColor="red";
box.style.width="200px";
box.style.height="160px";
window.οnlοad=f; //页面初始化时固定其位置
window.onscroll=f;//元素位置固定函数
function f(){
box.style.left=100+parseInt(document.body.scrollLeft)+parseInt(document.documentElement.scrollLeft)+"px";
box.style.top=100+parseInt(document.body.scrollTop)+parseInt(document.documentElement.scrollTop)+"px";
}