JS中的基本运动逻辑思想总结

Posted 2020-06-18 婷风

总结一下自己今天学习运动的基本思想：‘

【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);
}