• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

用滑动门技术设计按钮的图文教程

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
本文为翻译文章,全文地址:http://diger.cn/article.asp?id=351
原文地址:http://www.filamentgroup.com/lab/buttonElement/

Particle Tree 最近发布了一篇文章描述了一种他们拿出的设计按钮元素的技术,对于那些不熟练的人来说,表格按键是出了名的难以定制。典型的解决方案是使用浏览器提供的默认按钮,或者是使用一个图形输入。当图形输入完成了需求结果时,它请求创建一个新的图形为每一个按钮用它的文本“Baked-in”(没有提及以hovers交换它)。

尽管Particle Tree的技术提供了一种可靠的方案,它不能满足我们的需求。我们需要一种使用了滑动门技术的按钮,一种真正的HTML文本,不需要请求JavaScript转滚或者提交表格。满足这些条件就意味着input和anchor元素被排除了。很显然,按钮元素正是我们唯一的选择。下面的技术示范了一种使用滑动门技术的跨浏览器的按钮的技术。


查看Demo     
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('/upload/2007723195620387.gif');}" alt="" src="/upload/2007723195620387.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
标签:
复制代码 代码如下:

<button value="submit" class="submitBtn"><span>Submit</span></button> 

CSS:

程序代码
复制代码 代码如下:

button {  
  border:0;  
  cursor:pointer;  
  font-weight:bold;  
  padding:0 20px 0 0;  
  text-align:center;  

button span {  
  position:relative;  
  display:block;  
  white-space:nowrap;  
  padding:0 0 0 20px;  

/*blue buttons*/ 
button.submitBtn {  
  background:url(images/btn_blue_right.gif) right no-repeat;  
  font-size:1.3em;  

button.submitBtn span {  
  height:50px;  
  line-height:50px; 
  background:url(images/btn_blue_left.gif) left no-repeat; 
  color:#fff;  

button.submitBtn:hover { 
    background:url(images/btn_blue_right_hover.gif) right no-repeat;  

button.submitBtn:hover span { 
    background:url(images/btn_blue_left_hover.gif) left no-repeat;  


CSS For IE6和IE7(有时候需要)

复制代码 代码如下:

button {  
  width:auto;  
  overflow:visible;  

button span {  
  margin-top:1px;  


就像你能看到的那样,每个状态使用了2个图片(总共4个图片)。进一步简化,可以将这些状态转化为两个。但这种想法的最初测试出现了不一致的结果。


screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('/upload/2007723195622496.gif');}" alt="" src="/upload/2007723195622496.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('/upload/2007723195622186.gif');}" alt="" src="/upload/2007723195622186.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>
screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('/upload/2007723195622822.gif');}" alt="" src="/upload/2007723195622822.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>

screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {return true;} else {window.open('/upload/2007723195622401.gif');}" alt="" src="/upload/2007723195622401.gif" onload="if(this.width>screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" border=0>




浏览器支持:
IE6,IE7,Firefox(mac/pc),Safari,Opera,Camino等等。

警告:为了使hover在IE6中有效,你将需要编写一个类触发器。尽管不像图片交换一样糟糕。

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
用css动态生成闪字的代码发布时间:2022-02-05
下一篇:
用div+css解决出现水平滚动条问题发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap