css 字 juli,加入JQuery后用JS写的动画效果变快?

我用JS写了一个从左至右和从右至左的简单减速动画要求在滚动条滚动到一定位置的时候触发动画,在没有绑定滚动事件的时候动画是正常的,我用JQuery的滚动事件实时获取滚动距离,调用JS函数,但是除了第一个还是原来的速度,剩下的突然就变快了是为什么?

HTML代码如下:

1.png                //这个img是进行运动的模块,进行了绝对定位

发现惊喜
发现最热门的说唱

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值扯不上关系啊?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值