总结之后的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>
时间： 2024-10-14 18:46:33