Cursor的各种效果

总结之后的Cursor的各种效果：

http://sandbox.runjs.cn/show/bbwoyn0c

http://css-cursor.techstream.org/

源代码如下：

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
     <title>cursor</title>
     <style>
         *{
             margin: 0;
             padding: 0;
         }
         #wrap{
             width:1320px;
             margin:0px auto;
             font-family: monospace;
             font-size: 18px;
         }
         .caption{
             font-size: 30px;
             text-align: center;
             font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
         }
         div.listcur{
             width:200px;
             height:100px;
             background-color: #ccc;
             box-shadow:4px 4px 10px #ccc;
             float: left;
             text-align: center;
             line-height: 100px;
             margin:10px;
         }
     </style>
 </head>
 <body>
     <div id="wrap"><div class="caption">Cursor</div></div>
     <script>
         ;(function(globel,doc){
             var curarr = ['auto','default','none','pointer','progress',
             'help','text','cell','crosshair','alias','context-menu','vertical-text',
             'copy','move','no-drop','not-allowed','all-scroll','col-resize','row-resize',
             'nesw-resize','nwse-resize', 'n-resize','e-resize','s-resize','w-resize',
             'ns-resize','ew-resize','ne-resize','nw-resize','sw-resize','se-resize', 'wait',
             'grab','grabbing','zoom-in','zoom-out'];
             var wrap = doc.getElementById('wrap');
             var length = curarr.length;
             var d=document.createDocumentFragment();   //创建了一虚拟的节点对象
             var i = length;
             for(;i--;){
                 var div = doc.createElement('div');
                 div.textContent = curarr[i];
                 div.className = 'listcur';
                 style = curarr[i].slice(0,1).toUpperCase()+curarr[i].slice(1).toLowerCase()+';';
                 div.style.cursor = curarr[i];
                 div.style.cursor = '-webkit-'+curarr[i] ;
                 div.style.cursor = '-moz-'+curarr[i] ;
                 d.appendChild(div);
             }
             wrap.appendChild(d);
         }(this,document))
     </script>
 </body>
 </html>