javascript - ie - css - 動態更新滑鼠指標形狀

標籤：

最近寫了一個圖片展示的頁面，在彈出層中顯示大圖，在大圖的左邊和右邊點擊時可以翻頁。

將滑鼠在大圖上移動時，移動到左邊顯示一個向左的箭頭，移動到右邊時顯示一個向右的箭頭。

當第一次顯示大圖時，如果滑鼠位置在大圖上，初始化顯示一個向左或向右的箭頭。

 

關於滑鼠在大圖上移動，動態更新滑鼠指標，這個沒什麼問題，使用 img.onmousemove = function(){img.className=...}就可以搞定。

 

我遇到的問題是在IE瀏覽器上第一次顯示大圖的時候，初始化滑鼠指標形狀，下面是一個樣式表(css)：

12	.cursor_left {cursor: url(/images/left.cur), pointer}.cursor_right {cursor: url(/images/right.cur), pointer}

我在 img.onload 事件中來初始化滑鼠指標形狀, 直接設定 img.className = "...", 在chrome,firefox瀏覽器上能正常的顯示自訂的滑鼠指標形狀。但在 ie(6,8)瀏覽器上無法顯示出箭頭。

經過幾個小時的不斷測試，最後發現有ie上，使用 img.style.cursor = "url(....)"; 有效果。

好吧，javascript的代碼，針對ie瀏覽器：

12345

img.style.cursor = "url(/images/left.cur)";img.className = "cursor_left";  //如果同時指定的了 img.style.cursor 和 img.className, img.style.cursor 的最佳化級高於 img.className, 所以這裡必須加上這麼一句img.style.cursor = "";

這裡需要注意，最後加上一句： img.style.cursor = ""; 不然，在後繼的 img.onmousemove 事件中設定 img.className 會無效。我猜測是優先順序問題。

 

2014-05-30

javascript - ie - css - 動態更新滑鼠指標形狀