我用JS写了一个从左至右和从右至左的简单减速动画要求在滚动条滚动到一定位置的时候触发动画，在没有绑定滚动事件的时候动画是正常的，我用JQuery的滚动事件实时获取滚动距离，调用JS函数，但是除了第一个还是原来的速度，剩下的突然就变快了是为什么？
HTML代码如下：
<div class="bsection1 section1" id="sec1">
<div class="bsection1-img">
<img src="image/product/1.png" id="img1"/> //这个img是进行运动的模块，进行了绝对定位
</div>
<div class="bsection1-p">
<div class="bsection-p-p1">发现惊喜</div>
<div class="bsection-p-p2">发现最热门的说唱</div>
</div>
</div>
JS代码如下：
$(window).scroll(function(){
if(juli()==0){ //juli()是之前写的获取滚动条距离顶部的高度，取得百分比乘100
movein(img1,1062);
}else if(juli()>=10&&juli()<=27){
movein(img2,825);
}else if(juli()>=38&&juli()<=58){
movein(img3,1062);
}else if(juli()>=70&&juli()<=87){
movein(img4,825);
}
}).trigger('scroll')
function movein(obj,iTarget){
var timer=setInterval(function(){
var speed=(iTarget-obj.offsetLeft)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//if(obj.offsetLeft==iTarget){
// clearInterval(timer);
//}else{
obj.style.marginLeft=obj.offsetLeft+speed+'px';
//}
},30)
}
运动的div感觉写的也有点问题，进行动画的div外面还有一个父盒子是个背景banner，用style.left改变边距没用，才用的style.marginLeft，判定条件也完全没用，停下来靠的是减速到0自动停，那个target值是div初始left的负的值加上最终停留位置的左边距，而不是预想中的最终停留位置的左边距，但是还是可以实现运动，一共四张图但是绑上JQuery后后三张速度就变了是为啥，按理说滚动距离跟left值扯不上关系啊？
qq_今惜何夕_0
相关分类