cursor极上の深究,汇总跨浏览器鼠标指针解决方案

前言

css下众所周知cursor除了能够使用css2/css3通用指针,以及url()获取自定义鼠标,各位对其研究有多深,特别是跨浏览器的自定义指针兼容问题一直存在,想必也会有一些完美主义者跟我一样去愁死为啥opera这么不给url()以及咱的面子 = =,其实写本篇的源头是小熊制作万圣节专题页的经验以及开发仿新浪图片放大功能时所查的资料,比如你使用opera在浏览本站所有图片并将鼠标放在图片上是时,会发现神奇的加上了放大样式的指针效果,这个效果新浪微博也未兼容(看完真相,一切清晰),希望官方看到这条信息后能尽快跟进自己的css文件,以保证opera下也能显示放大指针,嗯,别急,这就让大伙知道真相,并在这里这里汇总这方面的全部资料以供亲们查阅。

css2通用指针(直接任何浏览器将鼠标放上去预览吧)

  • cursor: auto
  • cursor: inherit
  • cursor: crosshair
  • cursor: default
  • cursor: help
  • cursor: move
  • cursor: pointer
  • cursor: progress
  • cursor: text
  • cursor: wait
  • cursor: e-resize
  • cursor: ne-resize
  • cursor: nw-resize
  • cursor: n-resize
  • cursor: se-resize
  • cursor: sw-resize
  • cursor: s-resize
  • cursor: w-resize
  • cursor: hand (已废弃,IE6以及老版opera会使用这个作为现css2 pointer呈现,多见IE6 hack)

自定义指针

  • cursor: url(xxx.cur) [x, y], 候选指针;  //x,y为可选属性,表示离x,y轴的偏移,另外候选指针为css2/3其中的值,多见auto或pointer。

备注:

  • IE自定义指针支持cur/ani/ico,FF/GG/SF等支持png/cur/jpg/gif/bmp/ico,OP很恶趣味的不鸟咱。用cur和ico比较通用,如果实在需要ani,请使用相关指针转换工具转成gif或其他已保证在现代浏览器下运行,写法参照cursor:url(.....ani),url(.....gif),auto
  • FF必须准备候选指针,否则不显示url指针,写法如
    cursor:url(.....cur),auto 才正确呈现自定义指针,
    另外并且所有url指针应该放在前面,中间不用自带指针断开例如

    cursor:url(.....ani),url(.....gif),auto,而非
    cursor:url(.....ani),auto,url(.....gif)
  • 路径请使用绝对地址(否则出现指针在不同浏览器下出现过大或过小问题)
  • 指针尺寸尽量不超过32px * 32px,否则IE下指针会变形(其他现代浏览器保持正常尺寸)

css3通用指针(现代浏览器 && IE9+hover预览上去 *为IE6+支持)

  • cursor: none(IE/SF/OP无效)
  • cursor: context-menu(FF/GG/SF无效)
  • cursor: cell(SF无效)
  • cursor: vertical-text *
  • cursor: alias(SF无效)
  • cursor: copy(SF无效)
  • cursor: no-drop *
  • cursor: not-allowed *
  • cursor: ew-resize
  • cursor: ns-resize
  • cursor: nesw-resize
  • cursor: nwse-resize
  • cursor: col-resize *
  • cursor: row-resize *
  • cursor: all-scroll *

备注:有些css3指针还没有完全统一兼容,具体可以看下面的扩展阅读了解原因(具体跟呈现引擎相关)

嗯,接下来是内置鼠标资料汇总,如果细心的朋友可能会用过内置鼠标。但是一般可能使用不到的,而亲在使用opera浏览本站放大图片时,就会显示出放大的指针,原理就是这里,你可以使用opera将鼠标放到图上看看指针效果:

实现css代码

  1. .bearImgZoom .showBigImg *{cursor:url(http://static.jser.in/images/big.cur?v=2012031603),auto;} 
  2. .bearImgZoom .zoom--{cursor:url(http://static.jser.in/images/small.cur?v=2012031603),auto;}   
  3. /* FF君 (hack)*/ 
  4. @-moz-document url-prefix(){ 
  5.     .bearImgZoom .showBigImg *{cursor:-moz-zoom-in;} 
  6.     .bearImgZoom .zoom--{cursor:-moz-zoom-out;}   
  7. }   
  8. /* Webkit们 (hack)*/ 
  9. @media screen and (-webkit-min-device-pixel-ratio:0) { 
  10.     .bearImgZoom .showBigImg *{cursor:-webkit-zoom-in;} 
  11.     .bearImgZoom .zoom--{cursor:-webkit-zoom-out;}   
  12. }   
  13. /* 孤意独行的老O (hack)*/ 
  14. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){ 
  15.     .bearImgZoom .showBigImg *{cursor:zoom-in;} 
  16.     .bearImgZoom .zoom--{cursor:zoom-out;}   
  17. }  

实现方式就是这么简单(唔,复杂么?其实有人问我为啥FF/Webkit们支持cur为何我这里还要多写一道hack来调用内置呢?嗯,这问题问得好,主要是为了节省请求数,这也是偶小熊的癖好,哈哈,不解释)我也废话不多说,咱现在放出现代浏览器的内置鼠标(私有,不过使用数量上或许会列入css3增加指针的参考范围)

先来FF君(FF君直接hover看效果)

  • cursor: -moz-grab
  • cursor: -moz-grabbing
  • cursor: -moz-zoom-in
  • cursor: -moz-zoom-out

扩展:(FF官方预览)

Webkit们(WB们请hover,很遗憾WB支持甚少)

  • cursor: -webkit-grab
  • cursor: -webkit-grabbing
  • cursor: -webkit-zoom-in
  • cursor: -webkit-zoom-out

备注:-webkit-grab && -webkit-grabbing 在偶这的Webkit核心浏览器下并没有呈现,具体原因有待考察,官方预览也有标注,可能被drop了。
扩展:(Webkit官方预览)

老O来也

  • cursor: zoom-in
  • cursor: zoom-out

扩展:(Opera官方资料)

总结,我这情况还算是好运的,因为正好是需要放大和缩小的指针,当时是仿照新浪微博的效果来做,用Opera在新浪下也没有显示放大,当时就认为估计搞不定了,不过昨天花了几个小时去翻Opera的官方资料,总算找到,同时也找到些官方对url自定义指针的实现给出回馈:指出Opera对于未实现url原因主要由于无法确定URI资源对应类型,于是暂时未实现该功能,(总觉得这不是个办法啊- -)。

神马,你还是要跟opera过不去?

很好 - -,都到这份子上了,小熊不得不赞叹亲的执着,小熊从国外网站找到一个可以在opera下模拟出自定义指针的效果,相信你不是完美主义者,就是你的访客Opera浏览器类型占全体比重的大部分,你可以试试小熊二次开发的fixed JS,原版地址为这里。不过原版在我本机的opera下已无法运行(能力检测问题),该实现原理是基于js创建一个img对象,在Document文档树根下绑定了mousemove来根据event的鼠标指针坐标来移动img对象,需要根据指针来计算偏移,具体在文件内部我给出了注释,总的来说这个老外的思路还是不错的。

小熊改版下载(115)

operaCursorFixed

用法:

你可以在使用时使用能力检测来在你的js中动态加载这个js文件,例如(jQuery为例):

  1. jQuery(function($){   
  2.     //只是个例子 - - 请勿拷贝该url字符串   
  3.     $.getScript('http://bear/index/js/webtoolkit.cursor.js');   
  4. });  

或在头部引入文件

  1. <head>  
  2.     <script type="text/javascript" src="http://bear/index/js/webtoolkit.cursor.js"></script>  
  3.     <!-- 只是个例子 - - 请勿拷贝该url字符串 -->  
  4. </head>  

另外需要修改js文件内部的指针地址为你的指针地址

  1. //这只是个例子,填入你的指针地址,最好使用绝对地址,除非你的页面url层很稳定   
  2. skinPath : 'http://bear/index/js/skin.gif',  

另外如果发现你的指针被人海淹没了的话记得修改zIndex

  1. //小熊加的,如果zIndex层级不够的话,会被淹没 - -   
  2. el.style.zIndex = '9999';  

这做法并不是个好主意,希望opera能尽早实现url获取自定义指针的功能吧,各位,今儿俺就写到这儿了。


    Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 1048576 bytes) in /home1/vhost/vh515779/www/wp-includes/wp-db.php on line 1104