总结一下自己今天学习运动的基本思想:‘
【1】对于移动的div,使其在某一个位置停止将其封装成一个函数,仅仅改变speed的正负即可
涉及到问题包括:
var time=null;
function startMove(target)
{
var oDiv=document.getElementById(‘div‘);
clearInteral(time);//清除定时器
time=setInteral(function()
{
var speed=0;
if(oDiv.offsetLeft<target){speed=正数;}
else{speed=负数;} //考虑刚开始的div在目标值的左边还是右边
if(oDiv.offsetLeft==target){clearInteral(time);}
else{oDiv.style.Left=oDiv.offsetLeft+speed+‘px‘;}
},30);
}
【2】淡入淡出图片的制作,借助变量存储值。
var alpha=30;//存储变量值
var time=null;
function startMove(target)
{
var img=document.getElementById(‘img1‘);
clearInterval(time);
time=setInterval(function()
{
var speed=0;
if(alpha<target){speed=1;}
else{speed=-1;}
if(alpha==target){clearInterval(time);}
else{
alpha+=speed;
img.style.opacity=alpha/100;//火狐下为opacity:0-1之间的值 而IE为:filter:alpha(opacity=30);0-100之间的数值
document.title=alpha;
}
},30);
}
【3】侧边栏分享的制作过程,同上面【1】一样,主要是改变Left的值 设为0或-100,添加鼠标移入移出事件。
【4】缓慢运动的基本思想和上面差不多,但speed是个变值,speed=目标值-原值
var time=null;
function startMove(target)
{
var oDiv=document.getElementById(‘div‘);
clearInteral(time);//清除定时器
time=setInteral(function()
{
var speed=(target-oDiv.setoffLeft)/固定系数;//这里固定系数可以为任意数如:7,8.....................等
speed=speed>0?Math.ceil(speed):Math.floor(speed);//ceil 是向上取整 floor是向下取整 之所以取整是避免与目标值出现小偏差。
if(oDiv.offsetLeft==target){clearInteral(time);}
else{oDiv.style.Left=oDiv.offsetLeft+speed+‘px‘;}
},30);
}
【5】右边栏的分享div保持与滚动条替丁的距离,缓慢停止的过程。
1:首先得到滚动条的距离:scrollTop=document.documentElement.scrollTop||document.body.scrollTop
2:得到div与可视区之间的距离:var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2
3:div的高为:oDiv.style.top=t+scrollTop+‘px‘;这里需要使用paresint()函数将高转换为整数
window.onscroll=function ()------注意这里涉及到滚动条是windon.onscroll事件
{
var oDiv=document.getElementById(‘div1‘);
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+‘px‘;
startMove(parseInt(t)); //将其转换为整数,避免滚动条上下抖动
}
var time=null;
function startMove(target)
{
var oDiv=document.getElementById(‘div1‘);
clearInterval(time);
time=setInterval(function()
{
var speed=(target-oDiv.offsetTop)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.style.top==target){clearInterval(time);}
else{oDiv.style.top=oDiv.offsetTop+speed+‘px‘;}
txt1.value=oDiv.offsetTop+‘,目标:‘+target;
},30);
}