1. 在页面编写5个div，使用脚本对div进行定位，要求4个div分别呈现在浏览器的4个顶角位置，1个div居中呈现在页面正中间，通过window.onresize事件，在窗体改变大小的时候始终能够调整这几个层的位置
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
div {
100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<body>
<div class="d1" id="d1"></div>
<div class="d2" id="d2"></div>
<div class="d3" id="d3"></div>
<div class="d4" id="d4"></div>
<div class="d5" id="d5"></div>
</body>
</html>
<script type="text/javascript">
var d1=document.getElementById("d1");
var d2=document.getElementById("d2");
var d3=document.getElementById("d3");
var d4=document.getElementById("d4");
var d5=document.getElementById("d5");
window.onresize = function(){
var width=document.documentElement.clientWidth;
var height=document.documentElement.clientHeight;
d1.style.top="0px";
d1.style.left="0px";
d2.style.top=height-100+"px";
d2.style.left="0px";
d3.style.top="0px";
d3.style.left=width-100+"px";
d4.style.right="0px";
d4.style.bottom="0px";
d5.style.top=height/2-50+"px";
d5.style.left=width/2-50+"px";
window.setTimeout("function()",10);
}
</script>
2. 页面中有“购买”按钮，按钮初始情况下呈现在页面的最左边，缩进在左侧页面一半的宽度。当鼠标移入按钮时，按钮可以高亮呈现，同时按钮缓慢地从屏幕中向右移动，直至整个按钮完整出现。如果在移动过程中鼠标离开按钮，则按钮缓慢向左缩进，直接恢复成初始形态
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.menu{
160px;
height: 35px;
background-image: url(image/Out.gif);
position: absolute;
left: -80px;
cursor: pointer;
}
</style>
<body>
<div id="menu" class="menu"></div>
</body>
</html>
<script type="text/javascript">
//获取按钮元素
var menu = document.getElementById("menu");
//获取按钮的样式对象（外部样式获取的方法）
var menuStyle = window.getComputedStyle(menu);
//定时器
var timer1;
var timer2;
menu.onmouseenter = menuEnter;
menu.onmouseleave = menuLeave;
function menuEnter(){
//修改背景图（背景层只要修改一次就行，但是移动是多次的，所以为了性能好就分开写）
menu.style.backgroundImage = "url(image/Over.gif)";
moveRight();
}
function menuLeave(){
//修改背景图（同上理由：为了性能）
menu.style.backgroundImage = "url(image/Out.gif)";
moveLeft();
}
/**
* 向右移动
* [moveRight description]
* @return {[type]} [description]
*/
function moveRight(){
//关闭向左移动的定时器（进入前进以后就将后退清空，不然每次速度都会改变）
window.clearTimeout(timer2);
//获取按钮的左边距
var left = parseInt(menuStyle.left);
//改变按钮的左边距，使其向右移动
menu.style.left = left+1+"px";
timer1 = window.setTimeout("menuEnter()",10);
//如果按钮完全展现，关闭向右移动的定时器
left = parseInt(menuStyle.left);
if(left == 0){
//关闭移动定时器
window.clearTimeout(timer1);
}
}
/**
* 向左移动
* [moveLeft description]
* @return {[type]} [description]
*/
function moveLeft(){
//关闭向右移动的定时器（进图后退就将前进清空，不然每次速度都会改变）
window.clearTimeout(timer1);
//获取按钮的样式对象
//var menuStyle = window.getComputedStyle(menu);
//获取按钮的左边距
var left = parseInt(menuStyle.left);
//设置左边距，使其向左移动
menu.style.left = left-1+"px";
timer2 = window.setTimeout("menuLeave()",10);
//如果按钮缩进至页面的一半，关闭向左移动的定时器
left = parseInt(menuStyle.left);
if(left == -80){
//关闭移动定时器
window.clearTimeout(timer2);
}
}
</script>