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

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文件实现这种功能。


新闻名称:网页设计中的移动光标和图形光标
当前地址:https://www.cdcxhl.com/news47/164547.html

成都网站建设公司_创新互联,为您提供小程序开发服务器托管企业建站定制开发云服务器移动网站建设

广告

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

商城网站建设