Javascript Sắp xếp hình ảnh dưới dạng đống thẻ

Question

Im mới thành javascript để đảm bảo có rất nhiều thứ tôi thiếu trong sự hiểu biết của nó. Những gì tôi đang cố gắng để làm điều đó tạo ra một lớp hình ảnh để nó trông giống như một đống thẻ.

đã thấy các mã tương tự và đã cố gắng theo dõi ý tưởng của họ nhưng tôi không thể đưa hình ảnh vào đúng vị trí. Tất cả 10 hình ảnh trở lên được đặt ở cùng một vị trí.

Có thể giúp đỡ gì để xem tại sao chúng không định vị? Ngoài ra những gì là "em". Tôi không thể tìm thấy bất kỳ tài liệu trên nó, nhưng giả sử nó là em đo lường như px ?? Tại sao nó trong ""?

function Display() { 
var el; 
var left = 0; 
var top = 0; 
var i=0; 
var n = deck.length; 
var cardNode; 
var img = document.createElement("IMG"); 
img.src = "wendell7_back.png"; 
el = document.getElementById('deck'); 
el.appendChild(img); 
while (el.firstChild != null) el.removeChild(el.firstChild); 
for (i = 0; i < Math.round(n/5); i++) 
{ 
    cardNode = document.createElement("DIV"); 
    cardNode.appendChild(img); 
    cardNode.style.left = left + "em"; 
    cardNode.style.top = top + "em"; 
    el.appendChild(cardNode); 
    left += 0.1; 
    top += 0.1; 
} 

    } 

Answer 1

"em" là độ rộng của một "M" trong bất kỳ phông chữ đang được sử dụng (hoặc phông chữ mặc định của trình duyệt nếu không có gì đè nó).

Có ít nhất hai điều sai trong mã của bạn: trái và trên không có ý nghĩa trừ khi yếu tố mà chúng được áp dụng cũng có vị trí: tuyệt đối hoặc vị trí: tương đối (hoặc vị trí: cố định tôi nghĩ). Cách tiếp cận an toàn nhất của bạn là áp dụng vị trí: tương đối (nhưng không để lại: hoặc trên cùng) cho vùng chứa và vị trí: tuyệt đối đối với từng thẻ. Chỉ có một img. Đối với nhiều thẻ, bạn cần nhiều imgs nếu không cùng một img được định vị lại nhiều lần. Cách tiếp cận kinh tế hơn có thể là hiển thị hình ảnh "ngăn xếp" riêng biệt cho nhiều thẻ và hình ảnh thẻ đơn cho một thẻ.

Cách tiếp cận kinh tế hơn nữa chỉ để hiển thị hình ảnh thẻ đơn với "chú giải công cụ" để cho biết số lượng thẻ trong một ngăn xếp. Tôi đã sử dụng thành công kỹ thuật này trong việc thực hiện trò chơi bệnh nhân.

Tất nhiên, các kỹ thuật thay thế này không hoạt động nếu bạn muốn hiển thị nhiều thẻ như một chồng "thẻ được lật". Tạo một lớp và sửa đổi vị trí của lớp đó cho bộ bài. Đây là mã hoạt động:

function Display() { 
var el; 
var left = 0; 
var top = 0; 
var i=0; 
var n = deck.length; 
var cardNode; 
el = document.getElementById('deck'); 
while (el.firstChild != null) el.removeChild(el.firstChild); 
for (i = 0; i < Math.round(n/5); i++) 
{ 
    cardNode = document.createElement("DIV"); 
    cardNode.className = "card2"; 
    var img = document.createElement("IMG"); 
    img.src = "wendell7_back.png"; 
    cardNode.appendChild(img); 
    cardNode.style.left = left + "em"; 
    cardNode.style.top = top + "em"; 
    el.appendChild(cardNode); 
    left += .1; 
    top -= 6.2; 
} 

} 

Hy vọng điều này sẽ hữu ích.

Answer 2

tôi đoán là bạn bù đắp là quá nhỏ: nếu bạn thay thế "em" với "px" vì lợi ích của kiểm tra, và tăng các biến left và top 10 thay vì 0.1, tôi đặt cược bạn sẽ xem một số kết quả.

Để giải thích em: 1em bằng kích thước phông chữ hiện tại của phần tử. Nếu bạn chưa đặt kích thước phông chữ, nó sẽ sử dụng mặc định của trình duyệt. Nếu bạn đặt kích thước phông chữ là ví dụ: 20px trên thẻ body, sau đó 1em sẽ bằng 20px.

Answer 3

Đảm bảo rằng 'thẻ' của bạn có thuộc tính 'vị trí' thuộc tính css - hoặc là 'tuyệt đối' hoặc 'tương đối'.

Answer 4

Có một số vấn đề với mã đó.

1. Bạn chỉ sử dụng một img và sau đó bạn thêm nó vào mỗi div bạn tạo. Khi bạn thêm phần tử vào phần tử khác, nếu phần tử đã có trong cây DOM, bạn sẽ kết thúc di chuyển. Những gì bạn cần là tạo một phần tử img riêng biệt cho mỗi thẻ.

2. Bạn chưa cho chúng ta thấy CSS của bạn, nhưng trừ khi bạn đang sử dụng CSS để làm cho tất cả div yếu tố thuộc yếu tố #deck cách tuyệt đối hoặc tương đối vị trí, các left và top thuộc tính phong cách sẽ bị bỏ qua, như div sẽ tùy thuộc vào dòng chảy bình thường.

Còn "em" là gì. Tôi không thể tìm thấy bất kỳ tài liệu trên nó, nhưng giả sử nó là em đo lường như px ??

Vâng, đó là term from typography. "Em" là chiều rộng của một chữ cái viết hoa M.

Tại sao lại có trong ""?

Vì đó là chuỗi. Bạn cũng sẽ phải có "px" trong dấu ngoặc kép. Bạn đang làm gì với mã này:

cardNode.style.left = left + "em"; 

... đang sử dụng JavaScript để đặt thuộc tính kiểu. Thuộc tính kiểu luôn là chuỗi, trong trường hợp này bạn tạo chuỗi như "0.1em" và "0.2em", v.v.

Một số đọc:

• DOM2 Core specification
• DOM2 HTML specification
• DOM3 Core specification
• HTML5 specification
• Various CSS specifications
• Một cuốn sách tốt về Javascript, tôi khá thích JavaScript: The Definitive Guide David Flanagan
• Một cuốn sách tốt về CSS và HTML authoring