码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-12-04 13:46:45      阅读:311      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   ar   os   sp   java   on   文件   

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/ 

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

标签:style   blog   http   ar   os   sp   java   on   文件   

原文地址:http://www.cnblogs.com/mrjie/p/4142618.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!