总结之后的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 多屏幕适配 ： 第一部分

    1.在xml布局文件中,控件的宽度和高度用  dp ;   字体大小用 sp 2.根据屏幕的宽高来动态的适配 , 获取屏幕的宽高的两种方法: 第一种方法: /** * 屏幕的宽度 * 屏幕的高度 * ...

  2. JAVA基础学习day14--集合一

    一.集合的出现 1.1.集合简述 面向对象语言对事物的体现都是以对象形式,为了方便对多个对象的操作,就对象对象进行存储,集合就是存仪储对象最常用的一种试 1.2.数组和集合都是容器 数组也存对象,存储 ...

  3. response实现验证码图片

    package com.zhangbz.response; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2 ...

  4. 敏捷软件开发（3）---COMMAND 模式 & Active Object 模式

    COMMAND 模式 command模式非常简单,简单到你无法想象的地方. public interface Command { void execute(); } 这就是一个command模式的样子 ...

  5. python 连接 db2

    export IBM_DB_DIR=/home/db2inst1/sqllib export IBM_DB_LIB=/home/db2inst1/sqllib/lib http://programmi ...

  6. WebApi 使用PUT和DELETE时报405的问题

    最近两天写了个项目,里面有一个接口是用谓词delete接收请求. 本地完全没问题,但是当发布到服务器上之后(IIS7.5),就报出 405.0 - Method Not Allowed 很明显是配置问 ...

  7. C语言杂谈（三）存储类别

    本文讨论C语言中的存储类别,包括数据在内存的存储.变量的存储类别.函数的存储类别.生存周期.下图为计算机的存储空间,有寄存器和内存. 一.存储区域 1.寄存器:存放立即参加运算的数据. 2.系统区:存 ...

  8. 一个初学者对于MVC架构的理解

    我很早之前就开始接触.NET开发,一直都在2.0的框架下,所以对于MVC这种架构,听说过,但没有具体使用过,近期和外部朋友接触时,有了解到他们公司在使用MVC这种架构,所以自己就找来相关资料了解一下M ...

  9. Error: Could not access the Package Manager. Is the system running?

    最近在搭建cordova,android 开发环境,安装android studio之后创建一个demo之后,运行想看一下效果,在运行过程中创建一个虚拟机(arm)的,等了有1分钟左右,再次运行程序, ...

  10. 获取某地的经纬度 && 通过经纬度获取相应的地理位置

    最近要通过一个经纬度判断该经纬度是否位于某个地区内,所以通过网上查找资料,整合后出了下面的内容. 1.通过地址获取改地址的经纬度 /** * @param addr * 查询的地址 * @return ...