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

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

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

关于鼠标在大图上移动,动态的更新鼠标指针,这个没什么问题,使用 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. Unity 敌人波次设计

    一.平均时间随机敌人 将所有种类敌人预制物体放在一个列表里面,每隔时间T从列表中随机选出一个生成在场景中. 二.时间加权紧迫度随机敌人 在随机情况下每种敌人出现的概率近似相等,当敌人种类较多时,有可能 ...

  2. Bing词典分析

    0x01 Bug测试结果 本次测试的是Bing词典wp版本V4.5.2,经过测试,共发现如下Bug. 1.更新后,旧版本首页的每日单词与文章推荐不能重新获得,部分搜索历史记录丢失. 2.在单词挑战模式 ...

  3. [福大软工] Z班——Alpha现场答辩情况汇总

    Alpha现场答辩 小组互评(文字版) 各组对于 麻瓜制造者 的评价与建议 队伍名 评价与建议 *** 界面较友好,安全性不足,功能基本完整.希望能留下卖家的联系方式而不是在APP上直接联系,APP上 ...

  4. FZU软工第五次作业-词组频率分析

    目录 00.前言: 01.分工: 02.PSP表格: 03.解题思路描述与设计实现说明: 解题思路简述: 关键代码 04.附加题设计与展示: 设计的创意独到之处 实现思路 实现成果展示 05.关键代码 ...

  5. VC6到VC2010,项目迁移错误

    错误信息: error C2440: “static_cast”: cannot from “BOOL (__thiscall CSelectRect::* )(void)” to “BOOL (__ ...

  6. Oracle 控制文件管理

    控制文件是一个很小的二进制文件(10MB左右),含有数据库结构信息,包括数据文件和日志文件信息.控制文件在数据库创建时被自动创建,并在数据库发生物理变数时更新.控制文件被不断更新,在任何时候都要保证控 ...

  7. [学习笔记]Ubuntu下安装配置SQLSERVER2017

    摘要自微软官网: https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-ubuntu 安装步骤: 1. 导入公共秘 ...

  8. hdu 4685(强连通分量+二分图)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4685 题意:n个王子和m个公主,王子只能和他喜欢的公主结婚,公主可以和所有的王子结婚,输出所有王子可能 ...

  9. 关于适用base64对图片进行编码在服务器上性能的相关讨论

    周五在写open api的时候 和

  10. delphi 通过事务插入数据

    orsn1.StartTransaction; try qry1.Sql.Clear; qry1.Sql.Text:=' select * from log '; qry1.Open; qry1.In ...