前端文档

annimate step 无限滚动后再停,或开始滚动一段时间再缓慢停下来

日期:2018-05-16 阅读:491

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

<<点击返回