10-17盒子缓冲运动，显示盒子淡入淡出，offset、style.xx、的区别，页面窗口滚动

一、缓冲运动：

<script>
window.onload=function(){
var div = document.getElementsByTagName('div')[0];//盒子
var btn = document.getElementById('btn');//点击按钮让盒子移动
var timer=null;
function move(dest){//缓冲运动移到dest位置
clearInterval(timer);
timer=setInterval(function(){
//设置speed为变量，控制逐渐变慢
var speed=(dest-div.offsetLeft)/10;
//speed取整,如果speed大与0就让speed向上取整，否则向下取整
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//控制盒子的left值来控制盒子移动
div.style.left=div.offsetLeft+speed+'px';
},30);
}
btn.onclick=function(){//调用
move(500);
}
}
</script>

二、淡入淡出：

<script>
window.onload=function(){
var timer=null;
var box = document.getElementById('box');
var op=10;//记录box的opacity
function changeOpcity(target){//target为设置最终的透明度
var speed=10;//变化的速度
clearInterval(timer);
timer=setInterval(function(){
if(target>op){//如果设置的最终透明度大与此时的透明度，速度为正，递增
speed=10;
}else{//如果设置的最终透明度小与此时的透明度，速度为负，开始递减
speed=-10;
}
if(target==op){//如果设置的最终透明度等于此时的透明度，则停止计时器
clearInterval(timer);
}else{
op+=speed;//设置变量透明度的变化
box.style.opacity=(op/100);//针对非IE
box.style.filter='alpha(opacity='+op+')';//兼容IE
}
},30);
}
box.onmouseover=function(){
changeOpcity(100);
}
box.onmouseout=function(){
changeOpcity(10);
}
}
</script>

三、参数：

<script type="text/javascript">
//浏览器的页面是由分辨率决定   默认的一屏  宽度：1440（会随着分辨率改变）
// style.width  获取和设置宽度  500px
// offsetWidth  500+'px'    拿到的是number型    获取  但是不能直接设置，如果设置，赋值给style.width=
// width   非行间写法


//left     非行间写法
//style.left  行间 获取和设置  设置没问题   获取(针对行间样式),非行间获取不到
//offsetLeft      能获取   设置值    style.left=offsetLeft(拿到它初始位置，改变原来位置)
// 内容区     自定义   再大不会是整个浏览器的宽度
// 可视区     clientWidth    浏览器的可视区  不包括浏览器默认边距
// 500px    1200px 
//var oClient=document.body.clientWidth;
var oClient=document.body.clientHeight;
//alert(oClient);//1440
var oBox=document.getElementById('box');
//alert(oBox.style.width);//style.width就只能获取得到行间样式
//alert(oBox.offsetWidth);      // 获取值 ,不能直接设置值
</script>

四、滚动事件：

<script type="text/javascript">
//scrollTop   被网页卷去的部分
//记得,只要用到scrollTop就一定有滚动事件(onscroll)
window.onscroll=function(){   //滚动事件,只有鼠标滚动才会加载
var oBox=document.getElementById('box');
var oCon=document.getElementById('con');

var scroll=document.documentElement.scrollTop||document.body.scrollTop;//获取窗口滚动距离
//oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+scroll+'px';    //匀速运动的写法
move(document.documentElement.clientHeight-oBox.offsetHeight+scroll);
}
var timer=null;
function move(target){
var oBox=document.getElementById('box');
clearInterval(timer);
timer=setInterval(function(){//缓冲运动三部曲:   缓冲公式    取整   设置值 
var speed=(target-oBox.offsetTop)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
oBox.style.top=oBox.offsetTop+speed+'px';
},30);
}
</script>