最近写了一个图片展示的页面,在弹出层中显示大图,在大图的左边和右边点击时可以翻页。

将鼠标在大图上移动时,移动到左边显示一个向左的箭头,移动到右边时显示一个向右的箭头。

当第一次显示大图时,如果鼠标位置在大图上,初始化显示一个向左或向右的箭头。

关于鼠标在大图上移动,动态的更新鼠标指针,这个没什么问题,使用 img.onmousemove = function(){img.className=...}就可以搞定。

我遇到的问题是在IE浏览器上第一次显示大图的时候,初始化鼠标指针形状,下面是一个样式表(css):

1
2
.cursor_left {cursorurl(/images/left.cur), pointer}
.cursor_right {cursorurl(/images/right.cur), pointer}

我在 img.onload 事件中来初始化鼠标指针形状, 直接设置 img.className = "...", 在chrome,firefox浏览器上能正常的显示自定义的鼠标指针形状。但在 ie(6,8)浏览器上无法显示出箭头。

经过几个小时的不断测试,最后发现有ie上,使用 img.style.cursor = "url(....)"; 有效果。

好吧,javascript的代码,针对ie浏览器:

1
2
3
4
5
img.style.cursor = "url(/images/left.cur)";
img.className = "cursor_left";
 
 //如果同时指定的了 img.style.cursor 和 img.className, img.style.cursor 的优化级高于 img.className, 所以这里必须加上这么一句
img.style.cursor = "";

这里需要注意,最后加上一句: img.style.cursor = ""; 不然,在后继的 img.onmousemove 事件中设置 img.className 会无效。我猜测是优先级问题。

2014-05-30

javascript - ie - css - 动态更新鼠标指针形状的更多相关文章

  1. CSS/HTML 改变鼠标指针形状

    改变鼠标指针形状的方法有两种:第一种:用的来改变鼠标指针形状.另一种是:利用第三方控件的方法,而我自己最常用的是第一种:用css样式表来改变鼠标指针形状 我们先来看第一种:用来改变鼠标指针形状. 有些 ...

  2. C#软件开发实例.私人订制自己的屏幕截图工具(十)在截图中包括鼠标指针形状

    本实例所有文章文件夹 (一)功能概览 (二)创建项目.注冊热键.显示截图主窗体 (三)托盘图标及菜单的实现 (四)基本截图功能实现 (五)针对拖拽时闪烁卡顿现象的优化 (六)加入配置管理功能 (七)加 ...

  3. cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

    1 1 cursor CSS属性定义鼠标指针悬浮在元素上时的外观. https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor 概述 cursor  ...

  4. 【css】cursor鼠标指针光标样式知识整理

    在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 div( cu ...

  5. css常用鼠标指针形状代码

    默认 default 文字/编辑 text 自动 auto 手形 pointer, hand(hand是IE专有) 可移动对象 move 不允许 not-allowed 无法释放 no-drop 等待 ...

  6. 使用C#改变鼠标的指针形状

    1.在一个无标题的窗体中用MOUSEMOVE事件判断鼠标坐标是否到达窗体的边缘,如果是的话将鼠标指针改为可调整窗体大小的双向箭头. private   void   Form1_MouseMove(o ...

  7. 【javascript/css】关于鼠标事件onmousexxx和css伪类hover

    在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...

  8. JQuery Mobile - 解决动态更新页面内容,CSS失效问题!

    今天编写JQuery Mobile程序,需要对数组数据动态创建,并且每条数据对应一个复选框,于是我很顺利写了一个Demo,当我运行时候发现,和我期望的不一样!复选框确实创建出来了,但是却没有CSS效果 ...

  9. 鼠标指针光标样式css cursor default pointer hand url

    一.cursor语法与结构 1.cursor语法:cursor : auto | crosshair | default | hand | move | help | wait | text | w- ...

随机推荐

  1. Centos下安装破解Jira7的操作记录

    Jira是一个集项目计划.任务分配.需求管理.错误跟踪于一体的工具,可以作为一个bug管理系统,可以将在测试过程中所发现的bug录入.分配给开发人员.前面介绍了Confluence在Centos下的安 ...

  2. 《linux内核设计与分析》内核模块编程

    内核模块编程 一.准备工作 虚拟机:VMware Workstation 12操作系统:ubuntu当前内核版本:linux-headers-4.4.0-22-generic 二.有关于内核模块的知识 ...

  3. 【Alpha阶段】测试报告

    buglist:链接 1.测试找出的BUG 从上线之前黑盒测试结果bug清单: 录入报告的按钮变灰 浏览器浏览时网站崩溃 实验报告显示不出 收藏夹在点击多次后变为 1071生成报告数据不对 个人收藏点 ...

  4. [转载]Linux目录说明

    原作者博客: http://blog.51cto.com/yangrong/1288072 将文字部分转移到自己的目录下便于学习记录 感谢~ 2./目录 目录 描述 / 第一层次结构的根.整个文件系统 ...

  5. Jquery Ajax xml版Get请求PHP

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  6. Spring学习14-源码下载地址

    今天想下载一下Spring的源代码,登录到Spring官网,傻眼了,根本找不到下载的地方!费了九牛二虎之力在网上找到了一个下载地址,记下来,免得下次再次傻找. http://s3.amazonaws. ...

  7. 关于Spring MVC跨域

    1.Sping MVC 3.X跨域 关于跨域问题,主要用的比较多的是cros跨域. 详细介绍请看https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Ac ...

  8. 可视化数据matplotlib之安装与简单折线图

    matplotlib是一个可视化数据的模块,安装前需要先安装Visual Studio Community:然后去https://pypi.python.org/pypi上查找matplotlib并下 ...

  9. 洛谷 P4294 [WC2008]游览计划

    题目链接 不是很会呢,但似乎抄了题解后有点明白了 sol:状态DP显然,其实是要构建一棵最小生成树一样的东西,我自己的理解(可能不是很对哦希望多多指教)f[x][y][zt]就是到x,y这个点,状态为 ...

  10. FileStream文件流

    操作字节 文件流和文件的区别 文件不管大小,一次读写 文件流可以分块读写 //文件流的资源GC不会释放,所以需要使用using using (FileStream fsRead = new FileS ...