`
v5browser
  • 浏览: 1138303 次
社区版块
存档分类
最新评论

自定义鼠标样式--cursor

 
阅读更多
写正文之前总喜欢说几句废话,其实本人的博客上的问题一般都是在工作当中遇见的,为了避免忘记,还是写出来的好点!

都是细节部分,虽然几乎没人看!就当自己的笔记,便于以后查找!嘻嘻。。。。。

这个也是产品的一个要求,要求图片切换脚本,放在大图中会有一个放大镜的效果出来。

脑子一转,放大镜,直接把鼠标样式换成放大镜的图片不就行了,之前大学的时候喜欢把自己的电脑鼠标换的花花绿绿的。

css肯定也支持,上网搜了一下,整理如下:

css通用写法:

.demo{cursor:url('路径'),auto;}//IE,FF,chrome浏览器都可以

注意的两点

1.图标的格式--ico:最好是ico格式。本人用ico测了一下浏览器,没发现啥问题,图标的格式根据不同的浏览器来分:IE支持cur,ani,ico这三种格式,FF支持bmp,gif,jpg,cur,ico这几种格式,不支持ani格式,也不支持gif动画格式,因此来说一般将图片存为cur或ico格式比较好。

2.图标的尺寸--32*32:

最好是32*32的,不然其他的尺寸会导致浏览器渲染的图片大小不一致。

简单把!其实从本人毕业到现在做项目总结了一个问题,再复杂的问题都是一个一个简单的点组成,一个一个慢慢突破就行了。
写代码 关键要思路清晰!

Demo:http://www.yrzhll.com/example/cursor.html

原文:www.yrzhll.com

分享到:
评论

相关推荐

    WPF自定义鼠标形状 自定义鼠标

    这是一个WPF 自定义鼠标形状的例子。 一般我们用.cur或是.ani文件来自定义鼠标,但是这里我用WPF代码自己写一个鼠标形状,不用外部文件。 这样更受代码控制,更具灵活性,减少了文件读取失败的风险,节省了IO资源。

    自定义指针样式为图片.zip

    web前端开发中难免会遇到需要把鼠标样式改成透明图标形状的图标,很拉风、很好看,但是怎么做呢?我这里有一个实例可以通过cursor自定义指针样式为透明鼠标图片。

    web中自定义鼠标样式将其显示为左右箭头

    最近写项目需要实现一个功能:鼠标移动到一个图片左边显示左箭头,移动到右边显示右箭头。 实现方法:一个img上面定位两个div,div的样式如下: 复制代码代码如下: .toleft { width: 200px; height: 300px; ...

    使用jquery自定义鼠标样式满足个性需求

    1、浏览器自带的鼠标样式: 2、如果某些时候为了保持鼠标样式的统一,或者想指定特定的鼠标样式该怎么办呢? 代码如下: $(‘#divContainer’).css(‘cursor’, ‘url(../Images/CrimeAnalysis/ThematicMap/grab.cur)...

    Java自定义鼠标光标源码.rar

    Java自定义鼠标光标源码,得到默认的ToolKit对象,增加组件到容器上,将光标定义成其它图标样式。以下代码为核心代码:  Container container=getContentPane(); //得到容器  container.setLayout(new FlowLayout...

    react-animated-cursor:动画的自定义光标React组件

    npm i react-animated-cursor 安装项目依赖项 npm install 建造 npm run build 运行演示 npm run demo:start 制作演示 npm run demo:build 清洁演示 npm run clean:demo 演示版 该演示与捆绑在一起,并通过。 ...

    懒人原生自定义鼠标光标特效

    我们在微博上经常看到鼠标悬停图片上的时候 会有一个放大镜或者缩小的图标手势 在css里有一个属性cursor,默认提供了很多方法 但是没有一个我们想要的,怎么办呢 这个时候就需要自定义一个cur文件...

    修改windows系统的鼠标样式

    windows系统中的鼠标样式可以在电脑设置的鼠标属性中看到,可以通过自定义设置为自己偏好的样式 修改步骤:  1.使用AWicons Pro软件设计自己想要的鼠标光标样式。  打开软件,新建cursor类型文件(.cur),然后画...

    CSS使用自定义光标样式的实现_遁地龙卷风

    css样式 div{ cursor:url(‘1.jpg’),pointer;} HTML <body> <div xss=removed></div> </body> 当鼠标放到div上,光标会变成你指定的图案 *注意事项 要确保自定义的图片足够小,这里的是16*16 不

    左手鼠标指针(Left Hand Cursors)

    网上搜集的左手鼠标指针,为了那些鼠标手疼痛的人们免费分享。感觉手疼就切换一下鼠标按钮,左手倒右手,总有一双适合的手。

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    Silverlight2.0功能展示Demo源码

    Cursor - 鼠标移动到 FrameworkElement 上面时,鼠标指针的样式 Margin - 容器边缘与边缘之外的空白距离(像素值:上下左右;左右,上下;左,上,右,下) Tag - 保存一些额外的信息(System.Object类型) 9、...

    ExtAspNet_v2.3.2_dll

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    在博客园博文中添加自定义右键菜单的方法详解

    鼠标移入时样式改变,移出时还原 <style> body{margin: 0;} ul{ margin: 0; padding: 0; list-style: none; } .list{ width: 100px; text-align: center; cursor: pointer; font:20px/40px '宋体'; ...

    javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果

    v1.0实现功能 1 放大倍数设置 2 透明度设置 3 反转特效 4 放大图片层的大小自定义 5 鼠标层的大小自定义 6 ie6下select遮盖问题 7 光标样式自定义 8 zIndex设置 简单初始化方法举例 代码如下: new flower.init(...

    ASP.NET常用代码

    15.DataGrid行随鼠标变色 private void DGzf_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) { if (e.Item.ItemType!=ListItemType.Header) { e.Item.Attributes.Add( ...

    PT80-NEAT开发指南v1.1

    NEAT 开 发 指南 文档 适用于 PT80 系列 移动数据终端 版本记录 版本号 版本描述 发布日期 V 1.0 初始版本。 2012-04-12 V1.1 修改前三章内容 2012-09-25 目录 第一章 关于本手册.....................................

    js使用小技巧

    style标签里的第一个样式 document.styleSheets[0].rules[0] 防止点击空链接时,页面往往重置到页首端。 ()">word 上一网页源 asp: request.servervariables("HTTP_REFERER") javascript: document....

    Eclipse_Swt_Jface_核心应用_部分19

    12.4 光标(Cursor) 251 12.5 图像(Image) 252 12.5.1 画布类(Canvas) 252 12.5.2 图像类(Image) 254 12.5.3 图像数据类(ImageData) 255 12.5.4 保存图像类(ImageLoader) 256 12.5.5 Eclipse...

Global site tag (gtag.js) - Google Analytics