总结之后的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. Android中使用抖动动画吸引来用户注意

    原文:http://www.androidcn.org/topic/552e65bc61d460226ab27a5c 在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引 ...

  2. 可展开的列表组件——ExpandableListView深入解析

    可展开的列表组件--ExpandableListView深入解析 一.知识点 1.ExpandableListView常用XML属性 2.ExpandableListView继承BaseExpanda ...

  3. Android分辨率适配心得

    关于Android分辨率适配,这个是Android开发很头疼的一个问题,也需要花费相当一部分开发时间处理的一个问题,往往一个界面怎么适配就得想半天,特别是新手,也经常有人问我是怎么适配分辨率的,我也不 ...

  4. mysql登录和连接 权限

    在一些配置中会要求登录mysql 授权的时候注意ip地址是ip地址,localhost是localhost,在grant授权时,如果用localhost,就必须在所登录的配置文件中使用localhos ...

  5. Spring-2-J Goblin Wars（SPOJ AMR11J）解题报告及测试数据

    Goblin Wars Time Limit:432MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Description Th ...

  6. 《SQL Server企业级平台管理实践》读书笔记——SQL Server中数据文件空间使用与管理

    1.表和索引存储结构 在SQL Server2005以前,一个表格是以一个B树或者一个堆(heap)存放的.每个B树或者堆,在sysindexes里面都有一条记录相对应.SQL Server2005以 ...

  7. ADO.NET Entity Framework，Code First简单示例

    一.安装EntityFramework: 在vs里打开NuGet,在命令行里输入:Install-Package EntityFramework. 二.基本使用方法 1.建立数据模型 class St ...

  8. cocos2d-x之物理引擎初试

    发现问题:监听代码部分不能在onEnter()段书写 bool HelloWorld::init() { if ( !Layer::init() ) { return false; } visible ...

  9. [算法] Manacher算法线性复杂度内求解最长回文子串

    参考:http://www.felix021.com/blog/read.php?2040 以上参考的原文写得很好,解析的非常清楚.以下用我自己的理解,对关键部分算法进行简单的描述: 回文的判断需要完 ...

  10. POJ 2513 Colored Sticks（欧拉回路，字典树，并查集）

    题意:给定一些木棒,木棒两端都涂上颜色,求是否能将木棒首尾相接,连成一条直线,要求不同木棒相接的一边必须是相同颜色的.   无向图存在欧拉路的充要条件为: ①     图是连通的: ②     所有节 ...