前端文档
annimate step 无限滚动后再停，或开始滚动一段时间再缓慢停下来
日期：2018-05-16 阅读：924
dmandwp系统 - wordpress系统和DM系统区块建站>>
无限滚动的代码：
function begingd1(){
//console.log(i);
// curtopv = $('.lpgd1').css("top"); //have px
//curtopv = $('.lpgd1').position().top;
if(displaymobi=='block'){
acurtopvend = '-90.81%';
acurtopvinit = '-1618.81%';
}
else{
acurtopvend = -83;
acurtopvinit = -2173;
}
// console.log('curtopv111curtopv:'+curtopv2);
$(".lpgd1").animate({"top":acurtopvend}, 4000,"linear",function(){
$(".lpgd1").css("top",acurtopvinit);
begingd1();
});
// clearInterval(_interval_1);
}
------------------
但停不下来。只好当点击时，用一张jpg图片把效果给盖住。
================
先滚动再缓慢停下来的代码：
用了animate的step参数。
//https://www.w3schools.com/jquery/eff_animate.asp
var gdnum = 1;
$('.clickgd').click(function(){
if(gdnum==1){
//setInterval(begingd,1000);
_interval_1 = setInterval(begingd1,500);
_interval_2 = setInterval(begingd2,600);
_interval_3 = setInterval(begingd3,800);
}
gdnum++;
});
function begingd1(){
// curtopv = $('.lpgd1').css("top"); //have px
//curtopv = $('.lpgd1').position().top;
if(displaymobi=='block'){
acurtopv = '-90.81%';
acurtopv_judge = -95.81;
acurtopv2 = '-60.81%';
}
else{
acurtopv = -130;
acurtopv_judge = -140;
acurtopv2 = -83;
}
// console.log('curtopv111curtopv:'+curtopv2);
$(".lpgd1").animate({"top":acurtopv},{duration: 2000, easing: "linear",step: function(x) {
// console.log('curtopv111:'+x);
if(x>acurtopv_judge) {
$(".lpgd1").animate({"top":acurtopv2},{duration: 2000});
window.setTimeout(function() {
//alert("test");
$('.lpbeginbtn img').hide().eq(1).show();
}, 3000);
}
}
});
clearInterval(_interval_1);
}
----------------------------