文档章节

css手势状态定义属性cursor和自定义鼠标手势详解

lotozhou
 lotozhou
发布于 2015/12/10 13:53
字数 809
阅读 8882
收藏 1
点赞 1
评论 0

css手势状态定义:cursor和自定义鼠标手势详解,示例演示cursor手势状态如下:

auto : 默认值。浏览器根据当前情况自动确定鼠标光标类型。

all-scroll : 有上下左右四个箭头,中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。

col-resize : 有左右两个箭头,中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。

crosshair : 简单的十字线光标。

default : 客户端平台的默认光标。通常是一个箭头。

hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

move : 十字箭头光标。用于标示对象可被移动。

help : 带有问号标记的箭头。用于标示有帮助信息存在。

no-drop : 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。

not-allowed : 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。

pointer : 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。

progress : 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。

row-resize : 有上下两个箭头,中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。

text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。

vertical-text : 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。

wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。

*-resize : 用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize

url ( url ) : 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。

自定义手势详解:

一、路径。如果路径写成 url(bg/zoom.cur) 的话,只有最新主流浏览器(IE9等)可以识别,而IE8及以下浏览器不能识别,所以,为了兼容起见,路径统一用最完整的的为好,如 url(http://localhost/www/page/bg/zoom.cur);

二、后缀。虽然CSS2.0上说可以用 gif、jpg等格式图片,但是,又是IE8及以下浏览器不能识别除.cur图标以外的图片格式,所以为了兼容所有浏览器,最好做一张正规的.cur光标图片。

三,逗号。这回相反了,如果不加 ,ponter 最新主流浏览器(IE9等)反而无法识别,IE8及以下低版本浏览器不加 ,ponter  反而可以识别,所以,还是加上 ,ponter  为好。

综上,就是鼠标自定义背景手势的正确用法,使用绝对路径+使用cur光标文件+,ponter,当然这也要工具你的实际兼容情况。



© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
Google Chrome最强鼠标手势插件面世

泡泡网 2009年07月17日 类型:原创 作者:陈涛 编辑:陈涛 Google Chrome推出之后,其优秀的网页浏览速度和JavaScript执行能力受到了无数用户的青睐。但是对于很多用户来说,插件也非常重要,特...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

Chrome鼠标手势扩展--Mouse Stroke

Mouse Stroke的作者是一名ID叫做vigacmoe的用户,这款Chrome扩展功能非常强大,可以分别对导航、窗口、标签、链接、图像、书签以及Chrome中一些实用的功能的操作通过鼠标手势来完成,甚至还可...

匿名 ⋅ 2009/11/26 ⋅ 0

React Native开发之动画

博主这个系列的文章 React Native开发之IDE(Atom+Nuclide) React Native开发之FlexBox代码+图解 React Native的Navigator详解 另外,我在Github上建立了一个仓库来搜集优秀的React Nativ...

Yomut ⋅ 2016/06/29 ⋅ 0

【Android游戏开发十七】让玩家自定义手势玩转Android游戏!—Android Gesture之【输入法手势技术】

李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/android-game/340.html 很多童鞋说我的代码运行后,点击home或者back后会程序异常,...

迷途d书童 ⋅ 2012/03/19 ⋅ 0

android基础知识03——事件处理01:主要事件及其处理方式

这一期主要集中学习了android的事件处理相关内容。主要参考内容为: Android 事件处理 Android核心技术与实例详解—事件处理 android的窗口机制分析------事件处理 (该文属于android源码分析...

迷途d书童 ⋅ 2012/03/23 ⋅ 0

iOS开发系列--触摸事件、手势识别、摇晃事件、耳机线控

-- iOS事件全面解析 概览 iPhone的成功很大一部分得益于它多点触摸的强大功能,乔布斯让人们认识到手机其实是可以不用按键和手写笔直接操作的,这不愧为一项伟大的设计。今天我们就针对iOS的...

jianxin160 ⋅ 2015/08/18 ⋅ 0

nkGestures的网友评论

nkGestures由 一名网络ID为Niklen的网友开发,按照作者的说法是整合了一大堆高手们留下来的代码,再通过自己的研究开发的“山寨版”Chrome鼠标手势插件, 然而就是这个山寨版是手势插件,已经...

红薯 ⋅ 2009/12/11 ⋅ 1

Chrome 鼠标手势插件--nkGestures

nkGestures由 一名网络ID为Niklen的网友开发,按照作者的说法是整合了一大堆高手们留下来的代码,再通过自己的研究开发的“山寨版”Chrome鼠标手势插件, 然而就是这个山寨版是手势插件,已经...

匿名 ⋅ 2009/08/28 ⋅ 1

实战1.2-利用手势识别器,实现视图的手势控制

知识预备 什么是仿射变换? 从视觉效果上来理解,仿射变换是通过一系列原子变换复合而来的变换。包括:平移(Translation)、缩放(Scale)、翻转(Flip)、旋转(Rotation)和错切(Shear)...

Herbert77 ⋅ 2015/09/02 ⋅ 0

值得收藏的多个CSS 实用小技巧(附代码片段)

作为前端,日常开发充满了各种挑战与乐趣,我们穷尽一切在奇葩的需求中提升用户体验。本文将列举一些前端开发中碰到的小众需求,并提供解决方案以供参考。 一、修改鼠标手势图标 很多童鞋可能...

Lunaqi ⋅ 2017/11/30 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nginx服务架构初探(四):nginx服务器的rewrite功能

nginx服务器的rewrite功能 1.nginx后端服务器组的配置 1>upstream name {…} name是给服务器组限的组名 2>server address [parameters]; address为服务器地址 parame......

余温灬未存 ⋅ 今天 ⋅ 0

layer.prompt使文本框为空的情况下也能点击确定

最近一直在使用layui,但是用到弹出层layer.prompt时,如果文本框是空的话点击确定没有反应,不能向下执行。 但是我又需要空值,看看我原来的代码。 123456789 layer.prompt...

孟飞阳 ⋅ 今天 ⋅ 0

Linux普通文件压缩工具gzip、Bzip2、xz

第六章 文件压缩和打包 6.1 压缩打包介绍 Linux环境常见压缩文件类型: .zip,.gz,.bz2,.xz, .tar.gz,.tar.bz2,.tar.xz 压缩打包的目的 方便文件传输 节省磁盘空间 减少传输花费的时间 ...

弓正 ⋅ 今天 ⋅ 0

移动弹窗基础知识浅析——IOS弹窗体系

摘要: 最为常见的【弹窗】反而是最“捉摸不定”的东西。各种类型的弹窗傻傻分不清楚,不知道在什么场景下应该用哪种弹窗。尤其是遇到“二次确认”等场景…… 因此,打算从头整理移动弹窗的基...

阿里云云栖社区 ⋅ 今天 ⋅ 0

zabbix短信报警统计以及报表展示

一、需求 由于我们的业务报警比较频繁,之前是针对每个报警进行具体处理,但是有时还会重复出现,或者后续处理有时忘记跟进等,因此进行报警短信的统计,可以针对一些问题与业务跟进,明确后...

o翡翠谷o ⋅ 今天 ⋅ 0

JNI 输出LOG

1、导入log头文件。在你使用的 .c/ .cpp 文件中,导入 log.h 头文件。 #include<android/log.h> 2、在android.mk 加上 LOCAL_LDLIBS := -llog 或 LOCAL_SHARED_LIBRARIES := liblog 3、定义L......

国仔饼 ⋅ 今天 ⋅ 0

主线程pthread_exit 作用

#include <iostream>#include <pthread.h>#include <unistd.h>using namespace std;#define NUM_THREADS 10void* say_hello(void* args){ int i = *((int*)args);/......

xxdd ⋅ 今天 ⋅ 0

崛起于Springboot2.X之Mybatis-xml方式操作mysql数据库(3)

序言:当第一篇讲道Mybatis的时候,只要使用过mybatis的java程序员100%都会知道这种方式,因为这是最广泛最全面的编写sql操作mysql数据库的方式,高级sql的编写往往通过xml方式,接下来进入正...

木九天 ⋅ 今天 ⋅ 1

移动弹窗基础知识浅析——IOS弹窗体系

摘要: 最为常见的【弹窗】反而是最“捉摸不定”的东西。各种类型的弹窗傻傻分不清楚,不知道在什么场景下应该用哪种弹窗。尤其是遇到“二次确认”等场景…… 因此,打算从头整理移动弹窗的基...

猫耳m ⋅ 今天 ⋅ 0

spring elasticsearch 2.4 date 日期

1.mappingPUT user_behavior { "mappings": { "user_behavior": { "properties": { "date": { "type": "createDate", ......

xiaomin0322 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部