Hỗ trợ con trỏ chuột động trong ứng dụng web?

Question

Trình duyệt web có hỗ trợ các con trỏ động không?

Tôi đã tìm kiếm trên web để thêm các con trỏ tùy chỉnh vào ứng dụng web của mình. Tôi đã tìm thấy rất nhiều con trỏ không hoạt hình (.cur) và động (.ani), và sử dụng CSS đúng để ứng dụng của tôi có con trỏ tùy chỉnh! Dường như các con trỏ hoạt hình không được hỗ trợ trong các trình duyệt web mà tôi đã thử và tôi đã tự hỏi liệu có cách nào có thể đặt con trỏ động vào ứng dụng web của tôi không.

Answer 1

Sau khi thực hiện một số nghiên cứu khác, tôi không nghĩ rằng điều đó có thể xảy ra vào lúc này. Dường như không có trình duyệt nào hỗ trợ các con trỏ hoạt hình kể từ ngày 2/8/2012 bằng cách sử dụng thuộc tính CSS cursor. Tôi cho rằng nó có thể được thực hiện bằng cách sử dụng JavaScript để liên tục thay đổi giá trị của bất động sản cursor mỗi vài khung hình để làm cho nó xuất hiện hoạt hình, nhưng điều đó có thể rắc rối hơn nó có giá trị.

Tệp con trỏ chuột động. Các tệp .ani không hoạt động. Tất cả 5 trình duyệt web chính sẽ không hiển thị con trỏ. Nếu bạn thử một số CSS như, cursor: url('animated.ani'), con trỏ đó sẽ không hiển thị!

Nếu bạn đặt con trỏ thành tệp gif động, nó chỉ hiển thị trên một số trình duyệt và tính năng này giống như cursor: url('animated.gif'), con trỏ hoạt động trong Firefox và Chrome nhưng không hoạt ảnh, con trỏ không hoạt động ở IE9 hoặc Opera, và nó đã làm điều gì đó thực sự kỳ lạ trong phiên bản Windows của Safari - nó hoạt động nhưng chỉ hoạt hình khi tôi di chuyển con trỏ theo chiều dọc trên màn hình và không hoạt ảnh ở tất cả khi con trỏ không di chuyển hoặc đang di chuyển theo chiều ngang. Tín dụng cho Brutallus cho ý tưởng sử dụng một gif động mặc dù nó không hoạt động!

Dường như các trình duyệt không hỗ trợ các con trỏ hoạt hình vào thời điểm này, điều này thật đáng tiếc vì tôi thực sự nghĩ rằng nó sẽ bổ sung thêm một số chiều sâu cho các ứng dụng web nhất định. Tôi không ủng hộ bằng cách sử dụng con trỏ động cho hầu hết các trang web vì chúng cực kỳ khó chịu, nhưng có một số tình huống hiếm hoi mà chúng có thể hữu ích, chẳng hạn như trò chơi HTML5 nơi con trỏ có khả năng thêm vào chủ đề của trò chơi.

Answer 2

Để trả lời câu hỏi của bạn

Đừng bất kỳ trình duyệt web hỗ trợ con trỏ hoạt hình?

Yes.According MDN, IE hỗ trợ định dạng .cur và .ani.

Là một đề xuất, bạn có cân nhắc sử dụng hình ảnh gif động không?

Hãy thử điều này trong css của bạn

cursor: url(img/animated_cursor.gif), auto; 

Tôi cũng muốn chỉ ra rằng trong trường hợp bạn đã cố gắng sử dụng .cur hoặc .ani file trong IE và bạn didnt có được kết quả như bạn mong đợi, có lẽ một mình vấn đề với đường dẫn bạn cung cấp trong url con trỏ của bạn - điều này blog sẽ hỗ trợ bạn rất nhiều trong khía cạnh này.

Answer 3

-> nó nhấp nháy vì một lý do khi bạn di chuyển chuột theo hướng xuống dưới

Nó xảy ra vì con trỏ đi qua gif động (lên ảnh #mycursor, nhìn mã) và thoát ra nguyên tố này mà bạn gọi hàm.

Answer 4

Tôi thấy điều này, và dường như làm việc: http://ye5.blogspot.it/2011/01/animated-mouse-cursor-on-mozilla.html

Answer 5

Bạn có thể làm cho nó xảy ra với sự giúp đỡ của một chút javascript:

Thêm vào css của bạn

#container { 
    cursor : none; 
} 

#cursor { 
    position : absolute; 
    z-index : 10000; 
    width  : 40px; 
    height : 40px; 
    background: transparent url(../images/cursor.gif) 0 0 no-repeat; 
} 

Sau đó, thêm vào js của bạn

Thẳng Javascript Vers ion

// Set the offset so the the mouse pointer matches your gif's pointer 
var cursorOffset = { 
    left : -30 
, top : -20 
} 

document.getElementById('container').addEventListener("mousemove", function (e) { 
    var $cursor = document.getElementById('cursor') 

    $cursor.style.left = (e.pageX - cursorOffset.left) + 'px'; 
    $cursor.style.top = (e.pageY - cursorOffset.top) + 'px'; 

}, false); 

Jquery Version

$('#container').on("mousemove", function (e) { 
    $('#cursor').offset({ 
    left: (e.pageX - cursorOffset.left) 
    , top : (e.pageY - cursorOffset.top) 
    }) 

}); 

Answer 6

tôi quản lý để thực hiện điều này sử dụng các khung hình chính CSS, sinh động hình ảnh nguồn của con trỏ. Nó hoạt động trong Chrome và Safari (mặc dù nó có thể hơi khó xử nếu bạn có rất nhiều thứ đang chạy). Đủ tốt cho trang web cá nhân của tôi!

* { 
    cursor: url(frame1.png), auto; 
    -webkit-animation: cursor 400ms infinite; 
    animation: cursor 400ms infinite; 
} 

@-webkit-keyframes cursor { 
    0% {cursor: url(frame1.png), auto;} 
    20% {cursor: url(frame2.png), auto;} 
    40% {cursor: url(frame3.png), auto;} 
    60% {cursor: url(frame4.png), auto;} 
    80% {cursor: url(frame5.png), auto;} 
    100% {cursor: url(frame6.png), auto;} 
} 

@keyframes cursor { 
    0% {cursor: url(frame1.png), auto;} 
    20% {cursor: url(frame2.png), auto;} 
    40% {cursor: url(frame3.png), auto;} 
    60% {cursor: url(frame4.png), auto;} 
    80% {cursor: url(frame5.png), auto;} 
    100% {cursor: url(frame6.png), auto;} 
} 

Answer 7

Không có trình duyệt lớn thực sự hỗ trợ con trỏ hoạt hình (kiểu .ani) như của năm 2017, và tôi không nghĩ rằng bất kỳ đang thực sự có kế hoạch để thêm chúng trong tương lai. Tuy nhiên, một số trình duyệt ngẫu nhiên có thể hỗ trợ tính năng này (một trình duyệt không thực sự nổi tiếng), do đó bạn nên thêm một tính năng mà sẽ làm cho công việc con trỏ trong những trình duyệt:

body { 
    cursor: url("hand-pointing.ani"), pointer; 
} 

Bằng cách này, nếu con trỏ chuột động doesn' t hoạt động trong trình duyệt của người dùng, ít nhất là con trỏ con trỏ bình thường được bật. Nếu bạn không thêm phần con trỏ, các trình duyệt không hỗ trợ con trỏ hoạt ảnh sẽ tải con trỏ ENTIRELY DIFFERENT từ những gì bạn muốn. Ngoài ra, lưu ý rằng các trình duyệt mặc định con trỏ loại suck. Tôi biết rằng nhiều người muốn hỗ trợ con trỏ hoạt hình được thêm vào các trình duyệt chính, nhưng nó sẽ không xảy ra trừ khi có rất nhiều người kiến ​​nghị cho nó hoặc một cái gì đó.

Nói cách khác, không có câu trả lời cho câu hỏi này ngay bây giờ. Hãy bình luận nếu điều này thay đổi.