Thứ Tư

jQuery Di chuyển đến v1.1 kiểm soát Top


Mô tả: Nếu trang của bạn được dài hơi, đó là một ý tưởng tốt để cung cấp cho người xem một cách dễ dàng để nhanh chóng / tự động di chuyển trở lại trên cùng của trang. Đó là nơi mà kịch bản này. Nó hiển thị một điều khiển văn phòng phẩm ở góc dưới bên phải của cửa sổ mà khi nhấp vào nhẹ nhàng cuộn trang lên đến đỉnh. Và thay vì luôn luôn có thể nhìn thấy trên màn hình của người sử dụng, kịch bản cho phép bạn chỉ định như thế nào đến nay xuống trang người sử dụng (điểm ảnh) trước khi tiết lộ sự kiểm soát. Tiện lợi!
Lưu ý rằng ngoài việc hiển thị một điều khiển văn phòng phẩm, bạn cũng có thể xác định các liên kết anchor tùy ý trên trang web với một giá trị href đặc biệt(ví dụ: # top) mà khi nhấn vào kích hoạt kịch bản và cuộn trở lại từ đầu.
Demo: Cuộn trang xuống (ít nhất là 100 pixel) để xem một "Top" kiểm soát xuất hiện ở phía dưới bên phải của cửa sổ .

Chỉ Dẫn: Điểm phát triển
Bước 1: Đơn giản chỉ cần thêm đoạn mã dưới đây để phần <HEAD> của trang của bạn:
Chọn tất cả
Các tài liệu tham khảo trên các a.js tập tin cộng với hình ảnh một mẫu mà bạn nên tải về dưới đây (click chuột phải, và chọn "Save As"):
Lưu ý quan trọng : trang của bạn phải có một DOCTYPE hợp lệ ở đầu để cho kịch bản này để làm việc như dự định .
Bạn có thể tùy chỉnh một nhiều thứ, như các số lượng thời gian nó có kịch bản để di chuyển trở lại tính đến các đầu, thời gian của các phai trong / ra có hiệu lực để kiểm soát, và số lượng các điểm ảnh của người sử dụng thanh cuộn phải. trên cùng của trang trước khi tiết lộ sự kiểm soát. Bên trong file js, đây là phần có liên quan để chỉnh sửa:
thiết lập: {startline: 100, scrollto: 0, scrollduration: 1000, fadeduration: [500, 100]},
controlHTML: '<img src="up.gif" style="width:24px; height:24px" />' / / HTML để kiểm soát, đó là tự động bao bọc trong Bảo hiểm tiền gửi Việt Nam w / ID = "topcontrol"
controlattrs: {offsetx: 15, offsety: 15}, / / bù đắp kiểm soát liên quan đến quyền / dưới góc cửa sổ
anchorkeyword: # top ', / / Nhập vào giá trị href neo HTML trên trang web cũng nên hành động như "Di chuyển" liên kết
Đối với " controlHTML ", bạn có thể nhập bất kỳ mã HTML bạn muốn được hiển thị như kiểm soát, mặc dù nó nên được một cái gì đó đơn giản , chẳng hạn như một <IMG>, hoặc thậm chí chỉ là văn bản đơn giản. Các thiết lập " anchorkeyword "cho phép bạn nhập giá trị href của neo HTML trên trang (nếu có) cần được phân tích kịch bản và chỉ định" hành vi "di chuyển đến đầu đến. Với thiết lập trên, sau đây HTML neo trên trang web cũng sẽ cuộn trang lên đỉnh:
<a href="#top"> Lên trên </ a>

Thay đổi điểm đến mục tiêu của "Di chuyển Top" Control

Theo mặc định khi bạn click vào Di chuyển để điều khiển Top, nó cuộn trang lên đến đầu. Tuy nhiên, bạn có thể thay đổi điều đó để nói, 50 điểm ảnh từ đầu trang, hoặc di chuyển đến một yếu tố cụ thể trên trang web, chẳng hạn như là một tiêu đề. Thiết lập để thay đổi là "scrolltop" bên trong file js.
thiết lập: {startline: 100, scrollto: 0 , scrollduration: 1000, fadeduration: [500, 100]}
Thay đổi 0 hoặc là một số nguyên (ví dụ: 50), hoặc ID của phần tử bạn muốn kiểm soát để di chuyển đến, chẳng hạn như " myheader ", nơi" myheader "là một yếu tố quy định trên trang :
<h2 id="myheader"> Chào mừng bạn đến với ổ động </ h2>

Không có nhận xét nào:

Đăng nhận xét

 

Blogger news

Blogroll

About