Phát hiện khi một con chuột rời khỏi cửa sổ với Glio.js
Bao nhiêu lần bạn đi để đóng một tab và nhận thấy một cửa sổ phương thức yêu cầu bạn ở lại? Điều này dường như phổ biến hiện nay và nó được thực hiện vì một lý do: nó hoạt động!
Bạn có thể xây dựng một hiệu ứng tương tự bằng cách sử dụng Thư viện Glio.js. Đó là tập lệnh JS mã nguồn mở miễn phí để phát hiện khi con trỏ chuột của người dùng tiến sát mép hoặc khi nó rời khỏi cửa sổ trình duyệt.
Điều này có thể được sử dụng để thử giữ khách truy cập trên trang web của bạn. Nhưng, nó cũng có thể được sử dụng để tạo hiệu ứng động nếu chuột của người dùng đi xa về một phía của màn hình.
Bạn sẽ tìm thấy rất nhiều trong số này kịch bản ý định thoát trên tất cả các trang web và hầu hết trong số họ là khó khăn để tùy chỉnh. Nhưng, đó là những gì làm cho Glio.js trở nên tuyệt vời.
Đó là một thư viện mạnh mẽ cho bạn quyền kiểm soát trên những gì bạn làm với màn hình. Nếu chuột người dùng của bạn rời khỏi trình duyệt, bạn có thể hiển thị một phương thức, hoặc là thay đổi màu nền, hoặc là hoàn toàn không làm gì.
Nó cũng đi kèm với tích hợp điểm nóng mà bạn có thể kiểm tra bất cứ khi nào chuột của người dùng đến gần bất kỳ bốn góc nào của màn hình. Bạn cũng có thể xác định phương thức gọi lại và con trỏ sẽ đóng như thế nào trước khi chạy bất cứ thứ gì.
Để sử dụng Glio, chỉ cần tải xuống một bản sao từ GitHub và cài đặt nó. Bạn cũng có thể kéo một bản sao từ Bower, npm hoặc trực tiếp từ CDN.
Với tập lệnh trong trang của bạn, bạn chỉ cần thêm một dòng mã này (tùy chỉnh với các tùy chọn của bạn):
glio.init ([hướng, gọi lại]);
Các phương hướng tùy chọn có thể được bất kỳ góc nào (ví dụ:. “trên cùng bên trái”) hoặc là “hàng đầu”, đại diện cho đỉnh của màn hình. Chức năng gọi lại của bạn là bất cứ mã JS nào bạn muốn chạy khi chuột của người dùng quá gần. Tùy chọn khác cho phép bạn xác định khoảng cách từ điểm định hướng, bạn có thể tìm thấy thông tin liên quan trên GitHub.
Vì vậy, nếu bạn đang tìm kiếm một kịch bản đơn giản để phát hiện ý định thoát Glio là một tài nguyên phải có.
