cuốn sách gpt4 ai đã làm

jquery - Chuyển tiếp CSS3 + jQuery: các bản dịch của trục x có kết quả khác nhau trong các trình duyệt khác nhau cho hai mục khác nhau

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 13:18:41 hai mươi bốn 4
mua khóa gpt4 Nike

Codepen :(Đây là bút mã dành cho những ai muốn bắt đầu ngay. Hãy dùng thử trong Chrome và IE và xem sự khác biệt)

Tôi đang cố gắng sử dụng chuyển tiếp/chuyển tiếp css3 vì chúng mượt mà hơn hiệu ứng jquery.

Tôi có phiên bản di động của một trang web có thanh cố định ở trên cùng với logo và biểu tượng điều hướng. Khi bạn nhấp hoặc chạm vào biểu tượng điều hướng, thanh điều hướng bên trái sẽ bật lên.

Đây là nơi css3 xuất hiện. Tôi có phiên bản hoạt động của tính năng này chỉ sử dụng jQuery nhưng hoạt ảnh thực sự không ổn định trên thiết bị di động. Tôi đã tải xuống plugin chuyển tiếp jQuery, về cơ bản tích hợp các chuyển đổi css3 vào jQuery như thể chúng là hoạt ảnh (nhưng đó không phải là vấn đề - tôi không nghĩ đó là vấn đề).

Đối với phiên bản css3, khi tôi sử dụng x: [some money] để di chuyển nội dung và sửa tiêu đề, các chuyển đổi sẽ xuất hiện khác nhau trong các trình duyệt khác nhau. Trong tất cả các trình duyệt trên máy tính để bàn ngoại trừ IE10, tiêu đề cố định sẽ xuất hiện nhiều gấp đôi so với bình thường, trong khi nội dung được di chuyển sang bên phải một lượng thích hợp. Trên điện thoại của tôi, bằng chrome, tiêu đề bay ra nhiều gấp đôi so với bình thường, nhưng trong trình duyệt Android mặc định thì không.

Thông tin thêm: Tôi đã kiểm tra trình kiểm tra chrome và cả tiêu đề và nội dung đều nhận được cùng một chuyển đổi ([some number]px, 0). Tiêu đề được lồng trong nội dung. Tôi nghĩ đó là vấn đề. Một số trình duyệt sẽ di chuyển tiêu đề cùng với nội dung và sau đó diễn giải sự thay đổi tiêu đề. Mặt khác, do vị trí cố định nên một số trình duyệt diễn giải hai chuyển đổi một cách độc lập.

Câu hỏi của tôi: Vấn đề kỹ thuật nào gây ra sự khác biệt này? Làm cách nào tôi có thể nhận được kết quả nhất quán trên tất cả các trình duyệt hiện đại?

Codepen :(Như tôi đã nói, trên Chrome nó không hoạt động như mong đợi, nhưng nếu bạn thử IE thì nó hoạt động)

câu trả lời hay nhất

Lý do đằng sau điều này là thanh điều hướng #cơ thể các phần tử con của một phần tử, khi #cơ thể Khi di chuyển, thanh điều hướng cũng di chuyển theo. Bạn cũng áp dụng một chuyển đổi khác cho thanh điều hướng để định vị lại nó lần thứ hai. Việc xử lý khác nhau của trình duyệt là do sử dụng các phép biến đổi với các giá trị thuộc tính "cố định". Một giải pháp đơn giản và dễ áp ​​dụng hơn là #cơ thể Sử dụng phương thức chuyển đổiClass() để đạt được điều bạn muốn với ít mã hơn. Đây là bút viết mã .CSS đã thêm:

#bod {
quá trình chuyển đổi: lề .5s dễ dàng ra vào;
}
#bod.menu-mở {
lề trái: 30%;
}

và js đơn giản hơn:

$("#toggle").on("touchstart mousedown", function (sự kiện) {
event.stopImmediatePropagation();
sự kiện.preventDefault();
$('#bod').toggleClass('menu-open');
});

Về jquery - Chuyển tiếp CSS3 + jQuery : các bản dịch của trục x có kết quả khác nhau trong các trình duyệt khác nhau cho hai mục khác nhau, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/24217740/

hai mươi bốn 4 0
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress