h5 자체 적응 js 코드(코드는 모두 절대 포지셔닝으로 다음 js 코드를 추가)

26564 단어 h5
<script>

		!function(){

			var windowWidth = $(window).width();
			
			var widthList = $(".auto");
			
			$.each(widthList, function() {
				/// 
				var width = $(this).attr("width");
				
				if(!isNaN(width)){
					
					var currentWidth =  windowWidth / 1920 * width ;

					
					$(this).css("width",currentWidth+"px");
					
				}
				
				/// 
				var height = $(this).attr("height");
				
				if(!isNaN(height)){
					
					var currentHeight =  height ;

					$(this).css("height",height+"px");
					
				}
					
				/// x
				var x = $(this).attr("x");
				
				if(!isNaN(x)){
					
					var currentX =  windowWidth / 1920 * x ;

					if($(this).css("position") == "absolute"){
						
						$(this).css("left",currentY+"px");
						
					}else{
						
						$(this).css("padding-left",currentX+"px");
						
					}
					
					
				}
				

				/// y
				var y = $(this).attr("y");
				
				if(!isNaN(y)){
					
					var currentY =  y ;

					if($(this).css("position") == "absolute"){
						
						$(this).css("top",currentY+"px");
						
					}else{
						
						$(this).css("padding-top",currentY+"px");
						
					}

					
					
				}
				
				
				
			});
			
			var windowWidth = $(window).width();
			
			subFun($("body"));
			
			function subFun(obj){
				
				var list = $(obj);
				
				$.each($(list), function() {
				
					if ($(this).length>0){
						
						subFun($(this).children());
						
					}
				
				
				if($(this).css("position") == "absolute"){
					
					
					var left = $(this).css("left");
					
					left = left.substring(0,left.length-2);
					
					if(left!=0){
						
						$(this).css("left",(windowWidth / 1920 *left)+"px");
						
					}
					
					
					var right = $(this).css("right");
					
					right = right.substring(0,right.length-2);
					
					if(right!=0){
						
						$(this).css("right",(windowWidth / 1920 *right)+"px");
						
					}				
		
				}
				
				var width = $(this).css("width");
					
					width = width.substring(0,width.length-2);
					
					if(width!=0){
	
						$(this).css("width",(windowWidth / 1920 *width)+"px");
						
						if($(this)[0].tagName == "IMG" && $(this).attr("isAuto") != "no"){
							
				
							$(this).css("background","cover");
							
							
							var height = $(this).css("height");
					
							height = height.substring(0,height.length-2);
							
							if(height!=0){
								
								$(this).css("height",(windowWidth / 1920 *height)+"px");
								
							}
							
						}
					}	
					
					var fontSize = $(this).css("font-size");
					
					fontSize = fontSize.substring(0,fontSize.length-2);
					
					if(fontSize!=0){
						
						$(this).css("font-size",(windowWidth / 1920 *fontSize)+"px");
						
					}
				
			});
				
			}
			
	    	}();
	
</script>



좋은 웹페이지 즐겨찾기