Chiều cao và chiều rộng tương đối nhưng vị trí tuyệt đối x, y

Question

Tôi có một trang web cuộn ngang lớn. Hãy nghĩ về một ví dụ Mario World. Mọi "nội dung" đều được định vị tuyệt đối.

Tôi muốn có kích thước (chiều cao và chiều rộng) của các mục cần được liên quan đến khung nhìn của trình duyệt (để sử dụng phần trăm) nhưng cần phải xác định vị trí các hạng mục sử dụng pixel thực tế từ cánh trái, vv

Khi Tôi làm điều này, rõ ràng, các tài sản được thay đổi kích cỡ một cách chính xác khi tôi thay đổi kích thước cửa sổ trình duyệt của tôi. Nhưng vị trí của các mục là theo pixel, vì vậy mọi thứ di chuyển ra khỏi vị trí liên quan đến nền.

Có giải pháp CSS đơn giản nào cho vấn đề này không? Sử dụng tỷ lệ phần trăm để xác định vị trí (còn lại: 50% chẳng hạn) không thực sự là một giải pháp tốt vì nó không chính xác lắm (xem jsfiddle bên dưới). Hoặc tôi nên nhìn vào sự kiện thay đổi kích thước bằng cách sử dụng JS và làm một cái gì đó theo cách đó? Nếu vậy, làm thế nào?

Tôi không chắc chắn liệu mình có ý nghĩa hay không ngay bây giờ .. vì vậy hãy cho tôi biết nếu có bất kỳ câu hỏi nào.

Sửa

Dưới đây là một JSFiddle: http://jsfiddle.net/BZ77t/

Lưu ý rằng khi bạn thay đổi kích thước cửa sổ, khối đen (#blockpx) được bố trí sử dụng pixel và do không bị ảnh hưởng trong quá trình thay đổi kích thước. Tuy nhiên, khối màu đỏ (#blockpercentage) có kích thước và vị trí bằng cách sử dụng tỷ lệ phần trăm, đạt được hiệu ứng tôi muốn: gắn vào vị trí dự định (vị trí của hình nền). Tuy nhiên, nó không thực sự chính xác - mà không quan trọng nhiều trong ví dụ này, nhưng trong một thiết lập lớn hơn (rộng hơn chiều rộng), sự khác biệt được khá cao.

Answer 1

Các giải pháp là sử dụng một sự kết hợp của một yếu tố chứa và javascript: http://jsfiddle.net/KaaXg/3/

fiddle này bao gồm chức năng javascript này:

$(document).ready(function(){ 
    $(".container").css("width", $(".image").width());   
    $(window).resize(function(){ 
     $(".container").css("width", $(".image").width());   
    }); 
}); 

Điều quan trọng nhất cần lưu ý ở đây là left và width các giá trị đã được tính toán đối với phần tử body, không được mong đợi.

Để chống lại điều này, chúng tôi đã thêm phần tử có chứa hình ảnh và các thẻ div khác được sử dụng cho đồ họa khối màu đỏ trên trang.

Tuy nhiên, không có javascript, thuộc tính left vẫn chỉ là "cập nhật" khi trang được tải lại sau khi cửa sổ được thay đổi kích thước. Các yếu tố mức khối không tự cập nhật theo chiều ngang.

Vì vậy, bạn muốn left và width tỷ lệ thuận với hình nền, nhưng chúng sẽ không cập nhật khi trang được thay đổi kích thước hoặc di chuyển xung quanh chỉ bằng CSS. Giải pháp javascript ở trên cập nhật độ rộng của phần tử chứa tự động khi trang được thay đổi kích thước, giải quyết vấn đề này.

Tôi chỉ để lại bottom và height kiểu css, vì chúng hoạt động như mục đích cho trang web của bạn, vùng chứa sẽ tăng chiều cao để chứa hình ảnh trong đó.

Tôi không chắc chắn chính xác những gì bạn muốn làm với khối màu đen pixel cố định trên trang, vì vậy tôi đã để nguyên trạng thái này.

EDIT: Tôi đã sửa chữa lớn dự án này, đã tạo một nhà máy đối tượng để tạo đồ họa mới và cập nhật mã cho trang. Giải pháp này yêu cầu hầu như không có HTML hoặc CSS, có mã javascript nhiều hơn một chút, nhưng sẽ làm cho việc triển khai đồ họa động trên trang/chức năng bổ sung các yếu tố mới dễ dàng hơn nhiều. http://jsfiddle.net/RnCWN/9/

Giải pháp javascript tôi đã đưa ra ở đây với sử dụng thời gian thực cập nhật tỷ lệ phần trăm để thiết lập width và left thuộc tính của khối tỷ lệ phần trăm dựa, cũng như khởi tạo tĩnh height và bottom thuộc tính.

Với bản sửa đổi này, bạn có thể sử dụng phương pháp PercentageBasedGraphic để tạo hộp nổi trên trang của mình. Dưới đây là một ví dụ:

PercentageBasedGraphic(25, 10, 4, 30, "block1"); 

Chức năng này sẽ thêm một div với một thuộc tính id = "block1", tương ứng với width, height, left, và bottom giá trị (tất cả trong tỷ lệ phần trăm). Nó cũng trả về một đối tượng chứa tất cả thông tin cần thiết để thay đổi kích thước và định vị lại div vừa được tạo. Bạn có thể dễ dàng mở rộng theo chức năng này bằng cách thêm các lớp khác nhau vào mỗi div. Dù sao, làm thế nào để cuối cùng chúng ta sử dụng đối tượng được trả về của chúng ta?

addGraphic(graphicArr, PercentageBasedGraphic(25, 10, 4, 30, "block1")); 

Chức năng addGraphic thêm mỗi hộp nổi mới vào một mảng. Sau đó, chúng tôi lặp qua mảng này khi thay đổi kích thước cửa sổ để định vị lại tất cả các hộp nổi mà chúng tôi đã xác định.

Tôi sẽ thành thật với bạn, đồ họa Super Mario làm việc này rất thú vị để làm việc.

Answer 2

bạn có thể thử để kiểm tra sự khác biệt giữa cái cũ (trước khi thay đổi kích thước) và mới (sau) chiều rộng và chiều cao của cửa sổ và sử dụng sự khác biệt này để thay đổi đáy và rời bỏ chức vụ:

$(document).ready(function(){ 
    var width = $(window).width(); 
    var height = $(window).height(); 
    var blockLeft = parseInt($('#blockpx').css('left')); 
    var blockBottom = parseInt($('#blockpx').css('bottom')); 
    $(window).resize(function(){ 
     var difWidth = width - $(this).width(); 
     var difHeight = height - $(this).height(); 
     if (difHeight>0) { 
      $('#blockpx').css('bottom',blockBottom-difHeight + 'px'); 
     } else { 
      $('#blockpx').css('bottom',blockBottom+difHeight + 'px'); 
     } 
     if (difWidth>0) { 
      $('#blockpx').css('left',blockLeft-difWidth + 'px'); 
     } else { 
      $('#blockpx').css('left',blockLeft+difWidth + 'px'); 
     } 
    }); 
}); 

thử trên jsfiddle.

đó là biến thể jquery, bạn có thể thực hiện tương tự bằng javascript thuần túy.