javascript
最近写了一个图片展示的页面，在弹出层中显示大图，在大图的左边和右边点击时可以翻页。
将鼠标在大图上移动时，移动到左边显示一个向左的箭头，移动到右边时显示一个向右的箭头。
当第一次显示大图时，如果鼠标位置在大图上，初始化显示一个向左或向右的箭头。
关于鼠标在大图上移动，动态的更新鼠标指针，这个没什么问题，使用 img.onmousemove = function(){img.className=…}就可以搞定。
我遇到的问题是在IE浏览器上第一次显示大图的时候，初始化鼠标指针形状，下面是一个样式表(css)：
|
1
2
|
.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浏览器：
|
1
2
3
4
5
|
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
版权声明：本文为personnel原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。