总结之后的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. Mvc项目架构分享之项目扩展

    Mvc项目架构分享之项目扩展 Contents 系列一[架构概览] 0.项目简介 1.项目解决方案分层方案 2.所用到的技术 3.项目引用关系 系列二[架构搭建初步] 4.项目架构各部分解析 5.项目 ...

  2. Atitit.atiInputMethod v2词库清理策略工具    q229

    Atitit.atiInputMethod v2词库清理策略工具    q229 1.1. Foreigncode 外码清理1 1.2. 垃圾词澄清1 1.1. Foreigncode 外码清理 On ...

  3. 【转】内部Handler类引起内存泄露

    如果您在Activity中定义了一个内部Handler类,如下代码: public class MainActivity extends Activity {       private  Handl ...

  4. org.apache.http.conn.HttpHostConnectException: Connection to http://localhost refused in android

    给Manifest加网络权限<uses-permission android:name="android.permission.INTERNET"/>

  5. Silverlight项目笔记6:Linq求差集、交集&检查网络连接状态&重载构造函数复用窗口

    1.使用Linq求差集.交集 使用场景: 需要从数据中心获得用户数据,并以此为标准,同步系统的用户信息,对系统中多余的用户进行删除操作,缺失的用户进行添加操作,对信息更新了的用户进行编辑操作更新. 所 ...

  6. iOS 中的 NSTimer

    iOS 中的 NSTimer NSTimer fire 我们先用 NSTimer 来做个简单的计时器,每隔5秒钟在控制台输出 Fire .比较想当然的做法是这样的: @interface Detail ...

  7. iOS之学习资源收集--很好的IOS技术学习网站

    点击图片也能打开相关的网站: https://boxueio.com/skill/swift http://ios.b2mp.cn/ http://gold.xitu.io/welcome/?utm_ ...

  8. java web项目自动部署到Tomcat的原因

    关于eclipse中MAVEN WEB工程中编译问题 这几天是被java的环境搞疯了,我先是搭了一个spring+springmvc+mybatis的工程,在家里跑了一下,没有问题,把工程带到公司里用 ...

  9. Ubuntu15.04装机配置脚本

    #!/bin/bash echo "vim" sudo apt-get install vim cp -r ./vim/.vim ~/ cp ./vim/.vimrc ~/ ech ...

  10. C++杂谈（一）const限定符与const指针

    const限定符 c++有了新的const关键字,用来定义常变量,可以替C语言中的#define.关于const限定符,有以下需要注意: 1.创建后值不再改变 2.作用范围在文件内有效 3.添加ext ...