网页设计中的移动光标和图形光标

2022-06-07    分类: 网站建设

移动光标

在很多情况下,move值会得到与crosshair类似的结果。创作人员在设计网页时,需要指示一个屏幕元素可以移动时就会使用move,它通常显示为一个加粗的十字线,线的两端分别有箭头。也可以显示为一个“拳头”,用户点击并按下鼠标按钮时图标中的“手指”是弯曲的。

还有一些与move相关的cursor值:e-resize、ne-resize等等。Windows和大多数图形化UniX-sheU用户会把这些值识别为鼠标光标放在窗口一边或角落时出现的图标。例如,在网站建设时,把光标放在窗口的右边界上会出现一个e-resize光标,指示用户可以把窗口的右边3)6回拖动来改变窗口大小。把光标放在左下角则会显示sw-resize光标图标。有很多不同的方法可以表现这些图标。

等待和前进

wait和progress都指示程序正在忙。不过,它们并不相同:wait表示用户要等待直到程序不忙为止,而progress指示用户完全可以继续与程序交互,尽管它很忙。在大多数操作系统中,wait可能显示为一块表(可能有旋转的指针)或者显示为一个沙漏(可能在自己倒来倒去)。progress通常表示为一个旋转的“沙滩球”,或者是一个箭头,而且在这个箭头的一旁有一个小沙漏。

注意:值progress在CSS2.1中引入。

提供帮助

有时创作人员在网页设计时希望指示用户可以得到某种形式的帮助,此时就可以使用值help。help 有两种非常常见的表现方式,可能是一个问号;也可能是一个箭头,箭头旁边有一个小问号,如果已经确定某些链接指向更多信息,或者这些链接指向的信息有助于用户更好地理解网页,help就很有用。例如:

a.help {cursor: help;}

还可以使用help指示一个元素有“额外”信息,如有title属性的acronym元素,在很多用户代理中,把光标放在一个有标题的缩写词上时,用户代理会在一个“工具提示”中显示title属性的内容。不过,如果用户把光标移动得很快,或者用户的计算机速度很慢,倘若光标没有改变,用户可能不知道还有额外的信息。

图形光标

最后也是最有意思的一点是,在网页设计时还可以指定定制光标。这可以使用一个URL值做到:

a.external {cursor: url(globe.cur), pointer;}

当然,用户代理必须支持存储"所用的文件格式。如果用户代理不支持这种格式,就会转而使用值pointer。注意,在cursor语法定义中,URL必须跟有一个逗号和某个通用关键字。这与属性font-family不同,对于font-family,可以指定一个特定字体系列而不必提供任何后路。实际上,对于可能采用的任何图形光标,cursor 都要求有后路。

甚至可以在作为后路的关键字之前指定多个光标文件。例如,可以用不同格式创建同样的基本光标,把它们放在一个规则中,希望用户代理至少支持其中的一个:

a.external {cursor: url(globe.svg#globe), url(globe.cur), url(globe.png), url(globe.gif), url(globe.xbm), pointer;}

用户代理会逐个査看各个URL,直到找到一个可以用作为光标图标的文件。如果用户代理无法找到任何支持的文件,就会使用作为后路的关键字。

注意:如果用户代理支持动画图形文件来替换光标,就可以实现动画光标,例如,IE6就支持利用。ani文件实现这种功能。


新闻标题:网页设计中的移动光标和图形光标
URL网址:/news47/164547.html

成都网站建设公司_创新互联,为您提供微信公众号App设计外贸建站ChatGPT网站维护Google

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都定制网站网页设计