在网页中添加自定义鼠标指针
2014-12-04 13:11
183 查看
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/
相关文章推荐
- 稳扎稳打Silverlight(31) - 2.0Tip/Trick之加载XAP, 加载XAML, 加载DLL, AppManifest.xaml文件说明, 自定义鼠标指针
- 2.0Tip/Trick之加载XAP, 加载XAML, 加载DLL, AppManifest.xaml文件说明, 自定义鼠标指针
- 自定义鼠标指针显不出效果
- Android实现HID鼠标的指针自定义
- [unity3d]自定义鼠标指针
- 使用自定义的鼠标指针
- Win8系统下如何自定义鼠标指针让其更个性
- [一分钟学会系列之六]一分钟学会自定义鼠标指针图标(附DEMO程序)
- 在自定义鼠标指针的时候遇到的一些问题
- Unity自定义鼠标指针图案
- 积少成多Flash(10) - Flex 3.0 状态转换(State), 状态转换的过渡效果(State Transition), 自定义鼠标指针
- 在网页中改变鼠标指针?
- 九、Qt Creator中鼠标键盘事件的处理实现自定义鼠标指针
- 稳扎稳打Silverlight(31) - 2.0Tip/Trick之加载XAP, 加载XAML, 加载DLL, AppManifest.xaml文件说明, 自定义鼠标指针
- 自定义添加的鼠标事件
- 稳扎稳打Silverlight(31) - 2.0Tip/Trick之加载XAP, 加载XAML, 加载DLL, AppManifest.xaml文件说明, 自定义鼠标指针
- 九、Qt Creator中鼠标键盘事件的处理实现自定义鼠标指针
- [WPF]自定义鼠标指针
- 怎样在wpf中自定义鼠标指针
- Win8系统下如何自定义鼠标指针让其更个性