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

html - Cách thay đổi phạm vi hiển thị dữ liệu thành % phần trăm

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 07:36:29 28 4
mua khóa gpt4 Nike

Tôi sử dụng điều này cho tiêu đề của mình, nó sẽ thay đổi khi tôi cuộn lên và xuống trang. Tôi nhận thấy rằng nó không phản hồi, vì vậy tôi muốn hỏi liệu bạn có biết cách làm cho nó phản hồi không. Giống như thay đổi 0-690 thành tỷ lệ phần trăm để nó hoạt động trên thiết bị di động và màn hình TV.

HTML

 
Danh mục đầu tư

Dịch vụ

Liên hệ

CSS

.header-1 {
màu nền:dimgray;
display: block;

}

.header-2 {
màu nền:dimgray;
}

.header-3 {
màu nền:dimgray;
}

.tiêu đề {
position: fixed;
top: 0;
left: 0;
chiều cao: 8vmax;
width: 100%;
display: none;
khả năng hiển thị:ẩn;
quá trình chuyển đổi: khả năng hiển thị .4s, độ mờ .4s dễ ra vào;độ mờ:0;
cỡ chữ:4vmax;phần đệm:1.58vmax;màu:trắng;
}

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

Điều gì sẽ xảy ra nếu thay vì dựa trên pixel, bạn kiểm tra xem phần tử có đến đầu trang rồi thay đổi tiêu đề không?

Chúng tôi gọi những yếu tố này là "kích hoạt". Xem mã bên dưới để biết ví dụ về cách chúng hoạt động.

hãy cập nhậtHeader = () => {
hãy cuộnTop = $(window).scrollTop(),
triggerTitle = "Xin chào";
$('.trigger').each((i, el) => {
hãy để topPos = $(el).offset().top,
khoảng cách = topPos - ScrollTop;
nếu (khoảng cách < 0)
triggerTitle = $(el).data('title');
});
$('header h2').text(triggerTitle);
}

$(window).scroll(updateHeader);
$(window).on('touchmove', updateHeader);
body {
margin: 0;
}

#thùng chứa {
chiều cao: 1000px;
}

tiêu đề {
width: 100%;
position: fixed;
top: 0;
màu nền: đỏ;
}

P {
lề: 200px 10px;
}


Xin chào



kích hoạt1



kích hoạt2



kích hoạt3


Khi bạn cuộn xuống trang, mỗi trình kích hoạt sẽ đến đầu trang và văn bản trong tiêu đề sẽ thay đổi thành văn bản của trình kích hoạt mới nhất. tiêu đề dữ liệu giá trị. Bạn có thể đặt các trình kích hoạt này một cách thích hợp phía trên mỗi phần của trang web để, bất kể kích thước màn hình, tiêu đề sẽ cập nhật vào đúng thời điểm. Đây là một codepen .

biên tập

Hãy thử sử dụng JS này để có khả năng tương thích tối đa (không liên quan đến es6).

hàm cập nhậtHeader() {
var ScrollTop = $(window).scrollTop(),
triggerTitle = "Xin chào";
$('.trigger').each(function(i, el) {
var topPos = $(el).offset().top,
khoảng cách = topPos - ScrollTop;
nếu (khoảng cách < 0)
triggerTitle = $(el).data('title');
});
$('header h2').text(triggerTitle);
}

$(window).scroll(updateHeader);
$(window).on('touchmove', updateHeader);

Về html - cách thay đổi phạm vi hiển thị dữ liệu thành % phần trăm, 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/48916240/

28 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