总结之后的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. 【使用 DOM】使用 Document 对象

    Document 对象时通往DOM功能的入口,它向你提供了当前文档的信息,以及一组可供探索.导航.搜索或操作结构与内容的功能. 我们通过全局变量document访问Document对象,它是浏览器为我 ...

  2. ArcGIS10.2下调试10.1的程序

    听说:10.2比10.1好,诚然,安装了10.2打开一看是这样的,以为是下载的版本问题,后来才以现是显示设置的问题. 因为,我使用的两个显示器,屏幕有点大,所以,就改成中等了,不然怎么可截取下面的截图 ...

  3. Error occurred in deployment step 'Add Solution': Operation is not valid due to the current state of the object.

    Sharepoint 部署的时候出现一个错误 Error occurred in deployment step 'Add Solution': Operation is not valid due ...

  4. 【读书笔记】iOS-引用计数

    Cocoa采用了一种称为引用计数的技术,有时也叫做保留计数.每个对象有一个与之相关联的整数,称作它的引用计数器或保留计数器.当某段代码需要访问一个对象时,该代码将该对象的保留计数器值加1,表示“我要访 ...

  5. [android] 手机卫士设置向导页面

    设置向导页面,通过SharedPreferences来判断是否已经设置过了,跳转到不同的页面 自定义样式 在res/values/styles.xml中 添加节点<style name=””&g ...

  6. 我们需要专职的QA吗？

    [ 引用评论里的一句话:hurt but true  抛开作者某些偏激的想法外,作者暴露出来的问题还是需要测试思考的: 1.TestCase,TestData,TestConfiguration 没有 ...

  7. Linux线程学习（二）

    线程基础 进程 系统中程序执行和资源分配的基本单位 每个进程有自己的数据段.代码段和堆栈段 在进行切换时需要有比较复杂的上下文切换   线程 减少处理机的空转时间,支持多处理器以及减少上下文切换开销, ...

  8. [Eclipse配置] Eclipse代码中显示空白字符（空格，TAB和回车）的方法

    在代码页面点击右键进入 Preferences --> General --> Editors --> Text Editors. 在 Show whitespace charact ...

  9. Nde模块篇

    /*模块分为两种:原生模块和文件模块.原生模块即Node.js API提供的原生模块,原生模块在启动时已经被加载.文件模块即为动态加载模块,加载文件模块的工作主要由原生模块 module 来实现和完成 ...

  10. 《SQL Server企业级平台管理实践》读书笔记——SQL Server中收缩数据库不好用的原因

    数据库管理员有时候需要控制文件的大小,可能选择收缩文件,或者把某些数据文件情况以便从数据库里删除. 这时候我们就要使用到DBCC SHRINKFILE命令,此命令的脚本为: DBCC SHRINKFI ...