标签：
总结之后的Cursor的各种效果：
http://sandbox.runjs.cn/show/bbwoyn0c
http://css-cursor.techstream.org/
源代码如下：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>cursor</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #wrap{ 12 width:1320px; 13 margin:0px auto; 14 font-family: monospace; 15 font-size: 18px; 16 } 17 .caption{ 18 font-size: 30px; 19 text-align: center; 20 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; 21 } 22 div.listcur{ 23 width:200px; 24 height:100px; 25 background-color: #ccc; 26 box-shadow:4px 4px 10px #ccc; 27 float: left; 28 text-align: center; 29 line-height: 100px; 30 margin:10px; 31 } 32 </style> 33 </head> 34 <body> 35 <div id="wrap"><div class="caption">Cursor</div></div> 36 <script> 37 ;(function(globel,doc){ 38 var curarr = [‘auto‘,‘default‘,‘none‘,‘pointer‘,‘progress‘, 39 ‘help‘,‘text‘,‘cell‘,‘crosshair‘,‘alias‘,‘context-menu‘,‘vertical-text‘, 40 ‘copy‘,‘move‘,‘no-drop‘,‘not-allowed‘,‘all-scroll‘,‘col-resize‘,‘row-resize‘, 41 ‘nesw-resize‘,‘nwse-resize‘, ‘n-resize‘,‘e-resize‘,‘s-resize‘,‘w-resize‘, 42 ‘ns-resize‘,‘ew-resize‘,‘ne-resize‘,‘nw-resize‘,‘sw-resize‘,‘se-resize‘, ‘wait‘, 43 ‘grab‘,‘grabbing‘,‘zoom-in‘,‘zoom-out‘]; 44 var wrap = doc.getElementById(‘wrap‘); 45 var length = curarr.length; 46 var d=document.createDocumentFragment(); //创建了一虚拟的节点对象 47 var i = length; 48 for(;i--;){ 49 var div = doc.createElement(‘div‘); 50 div.textContent = curarr[i]; 51 div.className = ‘listcur‘; 52 style = curarr[i].slice(0,1).toUpperCase()+curarr[i].slice(1).toLowerCase()+‘;‘; 53 div.style.cursor = curarr[i]; 54 div.style.cursor = ‘-webkit-‘+curarr[i] ; 55 div.style.cursor = ‘-moz-‘+curarr[i] ; 56 d.appendChild(div); 57 } 58 wrap.appendChild(d); 59 }(this,document)) 60 </script> 61 </body> 62 </html>
标签：
原文地址：http://www.cnblogs.com/qianduanjingying/p/5579700.html
