主题:  如何使鼠标样式能更cool一点?

5D荣誉版主

职务:普通成员
等级:3
金币:10.0
发贴:662
#12002/10/24 15:50:33
如何制作网页上的动态鼠标效果

                5Dmedia Flood


  网页设计和时装设计一样大家都是赶潮流,追时髦。例如原来的动态标题栏、改变IE滚动条的颜色以及无边窗口的使用,刚开始出现都是风靡一时,过段时间就被用的泛滥了。但是不管怎么说,时髦还是要追的,要不就落后于时代了嘛。最近在网上经常可以看到鼠标的样式被改变,就象在Win2000中可以把鼠标样式改为小恐龙一样。还有的是动态的效果,看上去很cool的样子。鼠标跟随效果大家都很了解了,一般都是JS的运用,那么改变鼠标样式是不是也是同样的做法呢?
  实际上这种效果和IE地址栏上的个性小图标是同一个道理。只不过IE地址栏上的小图标是一个.ico文件,而这次我们需要的是一个.cur文件,也许你会说cur是什么呀。Cursor你在dreamweaver中一定见过吧?对了,就是在css中改变鼠标样式里有的。那么怎么制作cur文件呢?当然需要特定的工具了。大家可以使用Axialis AX Cursors(在很多软件下载的地方都可以找到的,华军软件园下载地址:http://www.onlinedown.net/axialisaxcursors.htm)。down完一路安装过后,启动软件界面如图所示:

  制作是很简单的,不需要你是ps或者fw高手,我想只要会用windows中的画图工具就可以制作出一个cursor。我也画了一个,只是觉得很烂,就不拿出来贻笑大方了。:)
  工具中有两个很好的一个是可以输入文字,另一个可以导入图片。如果你还是和我一样没有一点美术细胞的话,只有使用最后一招了。网页制作最终秘籍:ctrl+c--->ctrl+v。呵呵,打开左边的librarian 可以看到有动画和标准状态两个项目。

打开static 如下图:

  选择一个就可以了,然后保存到网站的跟目录下。如果需要动画的鼠标效果则是选择animated。然后在例子中选择一个,同样保存到站点跟目录下,注意动画鼠标的后缀是.ani。
  发挥你的创意,可以作出超酷而又有你自己个性的样式。
Try your imagination!
将文件上传到站点跟目录。
  好了准备工作都ok了,接下来当然是打开dreamweaver,打开你的网页
加上一小段css:

保存,上传页面。
OK。
快去告诉网友你的页面又cool了一点点……:D :D

效果演示1(静态鼠标):http://vip.5dmedia.com/flood/mousestyle/index2.htm
效果演示2(动态鼠标):http://vip.5dmedia.com/flood/mousestyle/index2.htm
一个页面:
http://vip.5dmedia.com/flood/eastday/ctmc/index.htm

最后:不知道IE5能不能看到???

编辑历史:[这消息被flood编辑过(编辑时间2002-10-24 15:53:09)]
[这消息被flood编辑过(编辑时间2002-10-24 15:54:27)]
[这消息被flood编辑过(编辑时间2002-10-24 15:56:32)]
[这消息被flood编辑过(编辑时间2002-10-24 15:57:05)]
[这消息被flood编辑过(编辑时间2002-10-24 15:58:19)]


5D荣誉版主

职务:普通成员
等级:3
金币:10.0
发贴:662
#22002/10/24 16:02:36
教程中图片可能大了点,
为方便大家,
做了个word版
点击下载work版




职务:管理员
等级:1
金币:11.0
发贴:901
#32002/10/25 8:38:28
ie6才支持



5D荣誉版主

职务:普通成员
等级:3
金币:10.0
发贴:662
#42002/10/25 12:30:38
刚才找了一下,确实这种鼠标效果只有IE6才支持。 :(
有兴趣的可以看看
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/cursor.asp

没有IE6的用户:
IE6安装文件down:ftp://210.35.68.76/upload/ie6_cn_full.zip(用ftp下,保留三天)

编辑历史:[这消息被flood编辑过(编辑时间2002-10-25 12:32:46)]


匆匆过客

职务:普通成员
等级:2
金币:10.0
发贴:592
#52002/10/27 21:10:37
支持原创
;)



大雪糕

职务:普通成员
等级:2
金币:10.0
发贴:579
#62002/10/28 19:24:32
这么老的东东还拿出来啊?用http://www.cometzone.com提供的做法也可以做出个性鼠标,而且好像跟浏览器版本无关



5D荣誉版主

职务:普通成员
等级:3
金币:10.0
发贴:662
#72002/10/28 20:58:26
你贴的那个站点确实挺有意思,但是不知道你有没有注意到,必须要安装一个插件才能看到动态鼠标效果,我想你不会要求大家都去down一个不熟悉的插件然后安装到电脑了吧(除非它发展为flash那样的行业标准)?

而我说的这种用css来做的,请仔细看一下msdn上的文章,注意下面一段话:
url(uri) Internet Explorer 6 and later. Cursor is defined by the author, using a custom Uniform Resource Identifier (URI), such as url('mycursor.cur'). Cursors of type .CUR and .ANI are the only supported cursor types.
确实只有IE6以上才支持,所以“这么老的东东”似乎说不上吧?

和浏览器无关?呵呵,帖一个IE5可以看到效果的来看看,大家共同学习一下。



不是高手

职务:普通成员
等级:3
金币:5.0
发贴:1352
#82002/11/2 23:04:59
哪个什么棒冰确实在胡说
也没仔细看看人家是如何做的

不过说到“老”,确实有点
这个属性是CSS2.0里的,而2.0的标准很早就出来了,只不过当时没有浏览器支持这个属性而已,不信现在去察看一下CSS2.0的手册,还有好多的属性至今还没被任何浏览器支持呢。



帅哥村党委专职副书记

职务:普通成员
等级:2
金币:3.0
发贴:373
#92002/11/11 11:05:12
做好了后cur太小了,看不清,怎么才能放大点?



缺缺

职务:管理员
等级:8
金币:41.0
发贴:9620
#102002/11/11 11:19:52
这个即使确实很就早就有了,IE6早就出来了啊.网络发展这么快,你不回还认为这两年内的东西都是新玩意吧.

写这样的东西确实不错,毕竟还没有多少人知道这个.但是没有必要去贬低星之海洋吧.

至于安装插件的那个网站倒是很早就有了,不会这样的东西未必收欢迎.



5D荣誉版主

职务:普通成员
等级:3
金币:10.0
发贴:662
#112002/11/11 12:01:22
绝版英俊在上个帖子中说
引用:
做好了后cur太小了,看不清,怎么才能放大点?

这个恐怕就需要你在制作的时候注意控制大小了,
可以参照软件内部的cur文件的大小



5D荣誉版主

职务:普通成员
等级:3
金币:10.0
发贴:662
#122002/11/11 12:01:57
allinhands在上个帖子中说
引用:
这个即使确实很就早就有了,IE6早就出来了啊.网络发展这么快,你不回还认为这两年内的东西都是新玩意吧.

写这样的东西确实不错,毕竟还没有多少人知道这个.但是没有必要去贬低星之海洋吧. :confused:

至于安装插件的那个网站倒是很早就有了,不会这样的东西未必收欢迎. :D


在这个问题上争论没有什么意义
这个问题到此为止