LOADING

javascript ie css 动态更新鼠标指针形状

–>

最近写了一个图片展示的页面,在弹出层中显示大图,在大图的左边和右边点击时可以翻页。

将鼠标在大图上移动时,移动到左边显示一个向左的箭头,移动到右边时显示一个向右的箭头。

当第一次显示大图时,如果鼠标位置在大图上,初始化显示一个向左或向右的箭头。

 

关于鼠标在大图上移动,动态的更新鼠标指针,这个没什么问题,使用 img.onmousemove = function(){img.className=…}就可以搞定。

 

我遇到的问题是在IE浏览器上第一次显示大图的时候,初始化鼠标指针形状,下面是一个样式表(css):

1
2

.cursor_left {cursorurl(/images/left.cur), pointer}

.cursor_right {cursorurl(/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

 

原文链接:https://www.cnblogs.com/personnel/p/4584960.html
本文来源 互联网收集,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源,如您发现有涉嫌抄袭侵权的内容,请联系本站核实处理。

© 版权声明

相关文章