H5效果 对比展示商品

挺简单的效果一般人都能看得懂，就不多废话了


	
   
   
	
   
   
	
	


	
   
   

		
    
    

			
     
     
		
    
    
		
    
    

			
     
     
		
    
    
		
    
    

			
     
     
		
    
    
	
   
   
	<script src="js/jquery.min.js"></script>
	<script src="js/zepto.min.js"></script>
	<script type="text/javascript">
		var startX,moveX;
		    $('.slide')
		    	.on("touchstart", function (e){
		    		startX = e.touches[0].pageX;
		    	})
		        .on("touchmove", function (e){
		        	moveX = e.touches[0].pageX - startX;
		        	mx = e.touches[0].pageX;
		        	pw = $(this).parent().width();
		        	if(moveX>0){
		        		if(mx>=pw){return}
		        		$('.left').width(mx);
		        		$(this).css("left", mx)
		        	}else{
		        		if(mx<=5){return}
		        		$('.left').width(Math.abs(mx));
		        		$(this).css("left", Math.abs(mx))
		        	}
		        })
		    $("img").css({
		    	'display':'block',
		    	'width': $('.container').width()+'px',
		    	'height': $('.container').height()
		    })

	</script>