前端文档

单页滚动效果源码 touch.js

日期:2019-12-26 阅读:718

dmandwp系统 - wordpress系统和DM系统区块建站>>

用到了这个js : touch-0.2.14.min.js ,其他的用jquery写。

 


			   $('.mobilinewrap .mobiline').each(function(){
							      pcsrc = $(this).data('mobibg');
								   $(this).css({'background-image':'url('+pcsrc+')'});
								 
								 
						  }); 
						  
						   $('.mobilinewrap .mobiline img').each(function(){
							       msrc = $(this).data('msrc');								  
								  if(msrc!='') {
									  $(this).addClass('mobi');
										$(this).attr('src',msrc);
								  }								 
								 
						  }); 
						  
						  
			
			
			  $h = $(window).height();
			 //  console.log($h);
			   $('.windowheight').css({'height':$h});
			   $('.mobilinewrap .mobiline').css({'height':$h});
				$('html body').css({'height':$h,'overflow':'hidden'});
				

			//------begin move----------------------
			var scrollH = $(window).height();
			$('.mobilinewrap').css({'height':scrollH});
			var gotop='';
            var touchB = true;
            var curpage = $('.curpage');
			//var scrollH = $('#pro').height();
           
            parrlength = $('.mobilinepage .mobiline').length;
            var curp = 0; //multiply
			
			var beginmove =1;
			
			
			touch.on('.mobilinewrap *', 'swipestart', function (ev) {
				beginmove =1;
				  $('.mobilinewrap .imgwrap').animate({'top': '200px','opacity':'0'},200);
				 
				// if (curp < parrlength-1) {  
				  //	$('body,html').animate({
						//	scrollTop: 0
				    // }, 500);
				 //}
				
				//  console.log('start'+beginmove);
			});
			
			touch.on('.mobilinewrap *', 'swipeend', function (ev) {
				beginmove =1;
				 // console.log('end');
			});
			
			
			
			 
            touch.on('.mobilinewrap *', 'swipeup swipedown', function (ev) {
				 
				
				beginmove++;
				if(beginmove>2) return;
				//console.log('repeat 1');
                if (!touchB) {
                    return;
                }
				
                if (ev.type == 'swipeup') { 				
				//console.log('swipeup');
				
                    if (curp == parrlength-1) {  
					 $('.mobilinewrap .imgwrap').animate({top: '0px',opacity:'1'});
                        return;
						
                    }                   
					
					
					curp++;
					gotop = scrollH * curp;
					 
					//alert(curp);
					 //alert("up:"+scrollH);					
                    $('.curpage').animate({top: -(gotop) + 'px'}); 					
					
 				$('.mobilinewrap .imgwrap').animate({'top': '0px','opacity':'1'});
					
                    return;
                }
				
				
                if (ev.type == 'swipedown') {
					
					//console.log('swipedown');
					
                    if (curp == 0) {
                         $('.mobilinewrap .imgwrap').animate({top: '0px',opacity:'1'});
                        return;
                    }					
                   
				   curp--;
				   
					gotop = scrollH * curp; 					
					// console.log(curp);					
					
                    $('.curpage').animate({top: -(gotop) + 'px'});
					 $('.mobilinewrap .imgwrap').animate({top: '0px',opacity:'1'});
                    return;
                }
				
				
				
				 
            });
			//------------end else----
		 }

 

<<点击返回