无延迟翻滚的图形/CSS混合风格的按钮 - CSS - 网页制作 - 站长资讯 - 一摘网站分类目录-免费收录各类优秀网站的中文网站目录
当前位置:一摘网站分类目录 > 首页 > 资讯首页 > 网页制作 > CSS > 无延迟翻滚的图形/CSS混合风格的按钮

无延迟翻滚的图形/CSS混合风格的按钮

发表时间:2011-07-05内容来源:中国目录网整理  [我要投稿]  [免费提交网站]  转发微博:

  

在一个具有图形背景的按钮中添加CSS风格的文本,这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率,从而有效地提高按钮外表图像的三维效果。

相比于常规的图形按钮,这些图形/CSS混合按钮可易于建立和载入,因为你只需要为空白按钮外面建立和载入一个图像,而不是为每一个按钮建立各自的图像。

同一个图像可以使用在网页所有按钮的背景。按钮的文本标签都是简单的CSS风格文本。

预先载入的

图形/CSS混合风格的为数不多问题之一是对翻滚效果有所限制。使用这一技术的最简单的方法是,指定CSS风格文本的翻滚效果,并使用所有翻滚状态(rollover states)的相同按钮外形图像。这可以给你带来快速、简洁的翻滚效果,但在一定程度上限制了你的开发选项。

你也可以建立一些可交替使用的按钮图像并构建你的CSS规则,以为不同的翻滚状态改变背景图像。然而,这些方法给你带来更多灵活的设计,但当浏览器首次载入图像文件时,这些可交替使用的铵钮图像会出现延迟现象(除非你采用预先载入按钮图像的方法)。

预先载入图像技术已被人熟知,而且也被人们所接受。问题是预先载入图像增加了网页载入和出现在访问者浏览器的时间。用户访问的第一二分钟非常关键,所以你无论如何都必须使得网页的初始化更加快速。使用图形/CSS混合按钮可以减少图像预先载入的时间,当然如果预先载入能够消除,页面的初始化则更加快速。

 

没有延迟的翻滚──不使用预先载入图像

我已经找到一种创新的方法,这种方法可以满足不同的翻滚状态的可交替使用的按钮图像,而其中不需要任何图像文件的载入。我第一次接触这一技术是在网络设计者捷克人Petr Stanicek的站点上的文章上发现的。

为了获得一个典型的按钮翻滚效果,你通常需要建立三个独立的图像,如图A所示。其中一个是普通的按钮,一个是悬浮状态,以及一个是激活状态。普通按钮的图像文件将成为初始化页面载入的一部分,但其它两个图像将被分开地载入,这样使得它们能够在用户的浏览器中得以使用。


图A

无预先载入翻滚技术通过结合所有三个按钮外表图像而成为单一图像文件而得以实现,如图B所示。然而,不需要为每一翻滚状态指定不同的背景图像文件,你指定的是合成图像的位置偏移量。在页面初始化载入过程中,合成图像文件能够自动地载入,所以无需要预先载入;而且,在浏览器获得不同图像文件过程中也没有时间上的延迟。


图B

超大图像与背景图像位置偏移的结合使用可以使你有选择性地为每一按钮状态显示图像的不同部分。按钮文本的CSS框尺寸决定着显示在浏览器的背景图像的百分比。

对于这一技术,你必须清楚按钮外表的确切水平和垂直尺寸,并正确使用这些尺寸,才能建立图像文件和按钮的CSS规则。

一个使用过程的范例

这里是一个代码范例,范例的无预先载入的翻滚技术应用于图形/CSS混合按钮。在这种情况下,按钮文本以无顺序列表而标记,三个外形美观的按钮包含在具有ID menu的div中。首先,CCS为:

div#menu {
    height: auto;
    width: 150px;
}
div#menuli {
    height: 30px;
    width: 100px;
    margin: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    text-align: center;
    line-height: 30px;
    list-style-type: none;
    background-image: url(images/buttons.jpg);
    background-position: 0px 0px;
}
div#menuli a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #FFFFFF;
}
div#menulia:link {
    color: #FFFFFF;
    background-image: url(images/buttons.jpg);
    background-position: 0px 0px;
}
div#menulia:visited {
    color: #CCCCCC;
    background-image: url(images/buttons.jpg);
    background-position: 0px 0px;
}
div#menulia:hover {
    font-weight: bold;
    color: #FFFFFF;
    background-image: url(images/buttons.jpg);
    background-position: 0px -30px;
}
div#menulia:active {
    font-weight: bold;
    color: #FFFFFF;
    background-image: url(images/buttons.jpg);
    background-position: 0px -60px;
}

这里是这三个按钮的HTML:

<div id="menu">
<ul>
<li><a href=http://www.chinahtml.com/0709/"link1.html">Button 1</a></li>
<li><a href=http://www.chinahtml.com/0709/"link2.html ">Button 2</a></li>
<li><a href=http://www.chinahtml.com/0709/"link3.html ">Button 3</a></li>
</ul>
</div>


在以上代码中,请注意到div#menuli规则指定了按钮的高度和尺寸。指定line-height以匹配按钮的高度,以确保文本能垂直地放置在中央。background-position属性控制着背景图像的左上角的位置。

div#menuli规则中,与width: 100%height: 100%联合在一起的display: block属性,能够使得按钮框内而不只是文本被点击。

最后,在独立按钮状态规则中,比如div#menulia:linkcolorfont-weight属性建立了文本翻滚效果,同样background-imagebackground-position也为背景图像实现了相同的功能。将悬浮状态设置为background-position: 0px -30px能够让背景图像增加到30象素,以致于顶端按钮外表被隐藏。同样,将激活状态设置为background-position: 0px -60px,可以将背景图像象素提高得更多。background-image需要在每一规则中不断地重复。

这一技术能够让你获得具有传统图形按钮的三维效果,并具有快速的CSS文本风格的混合按钮。同样,这一技术能够让你实现无延迟或者无图像预先载入的图形翻滚效果。

  • 站长资讯刊登此文只为传递信息,并不表示赞同或者反对作者观点。
  • 如果此内容给您造成了负面影响或者损失,本站不承担任何责任。
  • 如果内容涉及版权问题,请及时与我们取得联系。
115
最新推荐                    我也要出现在这里 | 更多
快速链接
最新快速审核
动态图片基地每日最搞笑的gif动态图片大全与您共分享,网罗当下最热门的微信图片表
www.asqql.com
中国数字期刊网(www.shiziqikan.com)是提供论文发表、期刊合作、
www.shuziqikan.com
71读小说网是广大书友最值得收藏的网络小说阅读网,网站收录了当前最火最热的网络小
www.71du.com
大香蕉网是专业发放淘宝优惠券天猫超市优惠券的优惠券网站,每天数万种淘宝内部优惠券
www.daxiangjiao1234.com
读客吧汇聚经典原创小说,致力于打造最好最完善的免费网络小说阅读网,网站收录了当前
www.dukeba.com
ADS 广告位招租
一摘开放式网站目录
在线投稿提交网站关于我们帮助中心 广告赞助免责声明 隐私保护最新推荐友情连接意见反馈
Copyright © 2006-2011 一摘网络 版权所有  1zhai.com  All Rights Reserved
在线投稿,网站免费登录,新收录网站首页显示,所有排名全自动实时刷更新,网站推广的最佳选择就在一摘开放式网站目录
Powered by 一摘网络(1zhai.com)    快速审核|投放广告,请点击给我信息快速审核|投放广告
页面执行时间: 267 毫秒