将鼠标指针修改为自定义图片需要注意的几个地方

虽然这个知识点很简单,但是走过不少的坑,现记录一下
主要是在样式中添加这样一个属性
cursor: url(‘http://p04mjp4fq.bkt.gdipper.com/pencil.ico‘),default;
鼠标指针

1.这个属性不能写在id里面,只能写在html的标签属性中,如果写在id标记的样式中会报“Invalid property value” 这个异常

鼠标指针 Invalid property value
2.url中要写绝对路径,default表示不能正常加载图标的替代鼠标样式。
最好写系统内置的:可以参考这个网站
http://css-cursor.techstream.org/
关于路径的问题之前在做视频播放器的时候也遇到过。即:设置视频currentTime时,使视频跳跃到对应时间点播放。如果在谷歌浏览器中使用的是相对路径就会在修改currentTime时,视频停止播放并回到起点的现象。因此最好将视频放到云端,然后引用它的链接。这个时候 七牛网站 是个不错的选择:https://www.qiniu.com/
这个网站有10G的免费存储空间,缺点是如果上传中文名称的视频,产生的链接就比较长,所以使用英文名称上传比较好。
3.自定义指针的图片最好设计成32*32这个尺寸同时注意图片的后缀名
后缀本来要求的是.cur或.ani,但是用.ico后缀亲测有效。因为转换为前面两个后缀的图需要下载软件或者用ps,而在线转换图片成.ico的网站还是蛮多的,所以使用了ico图标

ps:笔者在写一个你画我猜的html5小游戏练手,如有兴趣,请移步github:https://github.com/JulseJiang/Draw-Guess
引用jQuery的时候一定要使用最新的版本,之前不小心引入了一个低版本1.10版本,然后做触摸事件的时候走了不少弯路,最后才发现是版本的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

Julse

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值