Cursor的各种效果

最新推荐文章于 2021-06-20 11:22:19 发布

anhuang1896

最新推荐文章于 2021-06-20 11:22:19 发布

阅读量145

点赞数

原文链接：http://www.cnblogs.com/qianduanjingying/p/5579700.html

版权

总结之后的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>

转载于:https://www.cnblogs.com/qianduanjingying/p/5579700.html

anhuang1896

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Cursor的各种效果

总结之后的Cursor的各种效果：http://sandbox.runjs.cn/show/bbwoyn0chttp://css-cursor.techstream.org/源代码如下： 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charse...
复制链接

扫一扫