文档章节

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

lotozhou
 lotozhou
发布于 2015/12/10 13:53
字数 809
阅读 8973
收藏 1

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
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

前言 本文将介绍如何通过js实现移动端图片预览,包括图片的 预览模式,手势缩放,手势拖动,双击放大等基本功能;代码地址http://pangyongsheng.github.io/imgPreview/ 查看示例效果: 一、功...

pangyongsheng
10/22
0
0
Chrome鼠标手势扩展--Mouse Stroke

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

匿名
2009/11/26
12.1K
0
React Native开发之动画

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

Yomut
2016/06/29
44
0
【Android游戏开发十七】让玩家自定义手势玩转Android游戏!—Android Gesture之【输入法手势技术】

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

迷途d书童
2012/03/19
0
0
实战1.2-利用手势识别器,实现视图的手势控制

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

Herbert77
2015/09/02
110
0

没有更多内容

加载失败,请刷新页面

加载更多

tomcat编译超过64k大小的jsp文件报错原因

  今天遇到一个问题,首先是在tomcat中间件上跑的web项目,一个jsp文件,因为代码行数实在是太多了,更新了几个版本之后编译报错了,页面打开都是报500的错误,500的报错,知道http协议返回...

SEOwhywhy
15分钟前
0
0
flutter http 请求客户端

1、pubspec文件管理Flutter应用程序的assets(资源,如图片、package等)。 在pubspec.yaml中,通过网址“https://pub.dartlang.org/packages/http#-installing-tab-”确认版本号后,将http(0...

渣渣曦
15分钟前
0
0
Django基本命令及moduls举例

一、Django基本命令 1.创建项目 django-admin.py startproject mysite 创建后的项目结构:- mysite - mysite #对整个程序进行配置 - init #导入包专用- settings ...

枫叶云
30分钟前
4
0
zabbix安装

rpm -ivh http://repo.webtatic.com/yum/el6/latest.rpm 安装jdk rpm -ivh (自行在网上下载rpm包) 安装php并修改相应参数 yum -y install php56w php56w-gd php56w-mysqlnd php56w-bcmath......

muoushi
31分钟前
3
0
MySQL自增属性auto_increment_increment和auto_increment_offset

MySQL的系统变量或会话变量auto_increment_increment(自增步长)和auto_increment_offset(自增偏移量)控制着数据表的自增列ID。 mysql> show tables;Empty set (0.00 sec)mysql> CREATE TA......

野雪球
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部