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

Cursor的各种效果的更多相关文章

  1. cursor 手型样式

    cursor:hand 与 cursor:pointer 的效果是一样,都像手形光标.但用FireFox浏览时才注意到使用cursor:hand在FireFox里并被支持.cursor:hand :I ...

  2. cursor:hand与cursor:pointer的区别介绍

    cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标变成手行. cursor:hand :IE完全支持.但是在firefox是不支持的,没有效果. cu ...

  3. 兼容ie\firefox\chrome的cursor

    cursor:hand 与 cursor:pointer 的效果是一样,都像手形光标. 但用FireFox浏览时才注意到使用cursor:hand在FireFox.chorme里并被支持.cursor ...

  4. cursor变换

    cursor:hand 与 cursor:pointer 的效果是一样,都像手形光标.但用FireFox浏览时才注意到使用cursor:hand在FireFox.chorme里并被支持. cursor ...

  5. CSS中cursor的pointer 与 hand-备

    cursor:hand 与 cursor:pointer 的效果是一样,都像手形光标(在浏览器上时   鼠标会显示成 小手 ).但用FireFox浏览时才注意到使用cursor:hand在FireFo ...

  6. CSS中cursor的pointer 与 hand（转）

    CSS中cursor的pointer 与 hand 转载 2015年12月25日 16:18:36 标签: cursorpointer / cursorhand 1781 cursor:hand 与 ...

  7. cursor: hand和cursor:pointer的区别

    cursor:hand 与 cursor:pointer 的效果是一样的,都像光标指向链接一样,光标变成手行. cursor:hand :IE完全支持.但是在firefox是不支持的,没有效果. cu ...

  8. htnl5中设置文本单行显示，超出部分打省略号，鼠标移到文本时alt出全部文本内容

    Html代码: 1.<span class="my-span" title="无数无数无数无数无数">机构</span> Css样式: ...

  9. 简单的jquery拖曵原理js特效实例

    <!DOCTYPE html> <html> <title>简单拖曵原理实例</title> <script language="jav ...

随机推荐

  1. 参加：白帽子活动-赠三星(SAMSUNG) PRO....

    参加:白帽子活动-—赠三星(SAMSUNG) PRO.... Everybody~小i在这里提前祝大家国庆假期愉快,咱们期待已久的国庆活动终于开始拉,下面进入正题,恩,很正的题! 活动地址:http: ...

  2. while循环语句的使用

    说明:先判断表达式,后执行语句,while循环称为当型循环. 如果指定的条件为真(表达式为非0)时,执行while语句中的内嵌语句. 格式:while (表达式)   //判断括号内表达式 真(tru ...

  3. 2015年第14本（英文第10本）：The A.B.C. Murders (A.B.C谋杀案)

    书名:The ABC Murders 推荐指数:5星 作者:Agatha Christie 单词数:7万 不重复单词数:不详 首万词不重复单词数:不详 蓝思值:740 阅读时间:2015年7月18日 ...

  4. 【读书笔记】iOS-写代码注意事项

    一,我是尽早和经常编译的强烈支持者.通常,在写完每个方法或有点难度的代码后,都要尝试进行构建.这是一个好习惯,因为如果在上次成功编译以来添加的代码量很小,那么可以非常容易地缩小编译错误范围.这个方法还 ...

  5. SqlSever大数据分页

    在sql sever中大数据的分页一直是难以处理的一块,利用id自增列分页也存在不足之处.从一个相对全面的分页看,sql sever2005中新增的row_number()函数解决了这个问题.还是从一 ...

  6. iOS设计模式 - 单例

    备注:只能通过类的类方法才能创建单例类的实例,[[类名 alloc]init]创建实例没有用的. 原理图 说明 1. 单例模式人人用过,严格的单例模式很少有人用过 2. 严格的单例模式指的是无法通过常 ...

  7. animation of android （3）

    视图动画,只有view可以使用. 在android3.0以后,属性动画. ValueAnimation 可以记录属性变化的过程,所以他的对象是任何object. 所以ValueAnimation 的真 ...

  8. Mac terminal从bash切换到zsh

    0.预备知识 echo $SHELL命令可以查看当前正在使用什么shell 默认情况下(mbp 10.10.5)使用bash作为默认shell,然而也自带zsh,which zsh命令可以查看zsh的 ...

  9. OS X下安装Redis及配置开机启动

    1.下载redis源码包redis-3.0.5.tar(此步骤可在图形界面下操作) 2.解压源码包 tar zxvf redis-3.0.5.tar 3.编译源码并安装 #进入源码目录 cd redi ...

  10. 初识50个Linux命令

    1. [命令]:cat [功能说明]: concatenate files and print on the standard output #连接文件并打印到标准输出,有标准输出的都可以用重定向定向 ...