在网页中添加自定义鼠标指针

body{cursor:url(‘鼠标指针图片网址‘)}

a:hover{cursor:url(‘鼠标指针图片网址‘)}

说明1:第一行是鼠标指针初始形态,第二行是鼠标指针碰到链接的形态。

说明2:你需要两个鼠标指针图片(最好这两个图片是一套或是相近的)。

说明3:鼠标指针的图片格式是.cur和.ani,不是.jpg、.gif或是其它图片格式,这点请注意。

说明4:很遗憾,博客中国不支持任何一种鼠标指针图片格式的上传,大家要实现指针变换,要么就找一些别的网站贴出来的现成的指针图片链接地址,要么就考虑去别的上传空间上传鼠标指针图片(具体操作步骤我会在下文指出)

说明5:如果你喜欢的鼠标指针只有一张图片而不是两张,那么A{(cursor:url(‘鼠标指针图片网址‘)}这段代码就不用写了,一张鼠标指针图片其实也行的。

上面那个方法并不算是我的原创,最多只是改进、修改吧,不过下面我要介绍的随机变换鼠标指针(即每刷新一次主页,鼠标指针都会不同!)则绝对是我的原创了,我花了半天工夫来写下面的代码。很自豪,互联网上搜不到任何随机变换鼠标指针的代码,所以,喜欢个性化的朋友千万不要错过这个帖子了,因为你在其它任何网站都看不到这种方式的代码的^_^

第一步:在友情链接(推荐)或是博客摘要中加入下面的JAVASCRIPT代码,这个代码的作用是随机调用CSS文件:

<link id="stt" type="text/css" rel="stylesheet" href="b_sty.css">

<script Language="JavaScript">

<!-- Begin

var Folder = "你的CSS文件所在的目录";

var how_many_ads = 你的鼠标指针图片的套数;

var now = new Date();

var sec = now.getSeconds();

var ad = sec % how_many_ads;

var css = "";

ad +=1;

if (ad == 1) {css = "style1.css";}

if (ad == 2) {css = "style2.css";}

……

self.stt.href = Folder + css

//-->

</script>

说明1:“你CSS文件所在的目录”是CSS文件除去文件名的网址,比如你的CSS文件所在网址为http://www1.freehostingguru.com/bimzcy/style1.css

那么你CSS文件所在的目录就是http://www1.freehostingguru.com/bimzcy/

说明2:你的鼠标指针图片的套数是多少,那么刷新主页后鼠标指针图片不同的次数就是多少(这里请对照随机背景图片或是随机背景音乐的概念来理解),一套鼠标指针图片包括一张或两张鼠标指针图片。如果你的鼠标指针图片套数是两套,那么这里就填上2。

说明3:省略号处是和你鼠标指针的图片套数是相关的,如果你的鼠标指针的图片套数是两套,那么写到if (ad == 2) {css = "style2.css";}就可以了,如果是三套,就继续写if (ad == 3) {css = "style3.css";},依次类推。

第二步:用记事本创建数个CSS文件(依实际要求而定),分别命名为style1.css、style2.css……

第三步:将你创建的CSS全部上传到一个指定的网页空间,你要保证它们都在同一个目录下。

附录:提供.css文件上传的网页空间地址:http://www1.freehostingguru.com/logincn.php4

(你需要先注册一下,免费的)

好了,现在你可以打开你的博客网站试试效果了——是不是很酷啊?

附录1:比较全的鼠标指针图片网站:

http://www.blbcn.com/shu/

附录2:一个鼠标指针图片下载包,包含322个鼠标指针图片,想省事的朋友可以下载这个就够了:http://www.windown.net/soft/235.htm

附录3:现成的鼠标指针图片链接地址,内容较全,大家可以去里面直接粘贴地址,就可以省去上传鼠标指针图片这个步骤了:

http://myok.blogchina.com/2081936.html

附录4:提供鼠标指针图片文件(.cur、.ani)上传的网页空间地址:

http://www.rezfiles.com/upload/

时间: 2024-12-15 04:23:15

在网页中添加自定义鼠标指针的相关文章

如何在网页中捕获鼠标轨迹并输出

如何在网页中捕获鼠标轨迹并输出 1.      js捕获鼠标轨迹并输出 1.1.    js脚本如下: <script> window.addEventListener('load',function(){ var pad = document.getElementsByClassName('track-pad')[0]; var monitor = document.getElementsByClassName('track-monitor')[0]; var coordinate = do

CSS中cursor 鼠标指针光标样式(形状)

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 常用cursor光标 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头)auto 默认.浏览器设置的光标.crosshair 光标呈现为十字线.pointer 光标呈现为指示链接的指针(一只手)move 此光标指示某对象可被

10.3 鼠标指针经过时整行变色提示的表格

近年来,Web 2.0的概念逐渐被广泛接受,其中很重要的一点是强调改善用户体验,例如上一节的例子中,把表格设置为交替背景色,可以使访问者在浏览表格时有更好的体验. 然而对于长时间审核大量数据和浏览表格的用户来说,即使是隔行变色的表格,长时间阅读这样的表格仍然会感到疲劳.而且对于数据壁很大的表格,特别容易看错行或者列.如果参考微软公司Excel软件的做法,我们就可以发现很多可以改进的地方. 例如,在一个行列都很多的表格中,如果能像在Excel中那样,随时以高亮的方式提示一个单元格对应的行号(或行的

CSS改网页鼠标指针、改指定元素指针(1)——代码部分

要实现CSS改网页鼠标指针.改指定元素指针,我们应该首先了解以下内容: 所有主流浏览器都支持 cursor 属性. 注释:Opera 9.3 和 Safari 3 不支持 url 值. 注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 默认值: aut

改网页鼠标指针、改指定元素指针(2)——小白也能自绘指针

上节中讲到,css改网页的鼠标指针.使得大家都更能美化自己的网页.但指针文件怎么获取呢?你可以到百度上搜索鼠标指针图片.鼠标样式图片.光标图片等等.其二我们可以自己画出独一无二的光标图片哦,今天我就来普及一下最简单的自绘光标的方法. 自绘光标——首先需要一个图片处理软件(photoshop等).但我们要让小白也能自绘鼠标指针!就要用更简单的方法. 我们将要用到全世界最牛逼最闻名的图片处理神器——美(huǐ) 图 秀 秀 ~(@^_^@)~,同样,对于小白来说,美图秀秀网页版仅够了: 新建一张画布

在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件

在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件 引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过"我现在可以通过WebBrowser实现对各种Html元素的操控,唯独无法控制Html的上传控件",出于安全原因,IE没有对上传控件提供操控支持,这使得我们没法像控制其他控件一样用简单的代码进行赋值. 比较实际的解决方案就是模拟操作了,下面我就将演示

jQ禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突

1. 禁止右键点击 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 代码如下: $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($

在网页中引用DWG控件,交互绘图,和响应鼠标点击对象的方法

在网页中引用DWG控件,交互绘图,和响应鼠标点击对象的方法[MXDRAW CAD控件文档]下面帮助的完整例子,在控件安装目录的Sample\Ie\iedemo.htm中. 主要用到函数说明A. ImplementCommandEventFun控件的命令事件函数,与用户交互的操作,需要放到命令事件函数内实现,这样控件才能保证正常的Windows 消息循环被处理.B. ImplementMouseEventFun控件的鼠标事件函数,可以用JS程序里,响应鼠标事件,详细说明如下:void MouseE

鼠标参数,获取鼠标在网页中的坐标

1. 事件对象 event 标准浏览器 传递给响应函数 IE 把 event 事件对象作为全局对象 window 的一个属性 2. 浏览器滚动条高度 标准浏览器 使用 documen.documentElement.scrollLeft    documen.documentElement.scrollTop Safari 等浏览器 使用 window.pageXOffset    window.pageYOffset 没有 doctype 声明的页面 document.body.scrollL