时间:2021-05-18
本文为翻译文章,全文地址:http://diger.cn/article.asp?id=351
原文地址:http:///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>
标签:
复制代码 代码如下:
<buttonvalue="submit"class="submitBtn"><span>Submit</span></button>
CSS:
程序代码
复制代码 代码如下:
button{
border:0;
cursor:pointer;
font-weight:bold;
padding:020px00;
text-align:center;
}
buttonspan{
position:relative;
display:block;
white-space:nowrap;
padding:00020px;
}
button.submitBtn{
background:url(images/btn_blue_right.gif)rightno-repeat;
font-size:1.3em;
}
button.submitBtnspan{
height:50px;
line-height:50px;
background:url(images/btn_blue_left.gif)leftno-repeat;
color:#fff;
}
button.submitBtn:hover{
background:url(images/btn_blue_right_hover.gif)rightno-repeat;
}
button.submitBtn:hoverspan{
background:url(images/btn_blue_left_hover.gif)leftno-repeat;
}
CSSForIE6和IE7(有时候需要)
复制代码 代码如下:
button{
width:auto;
overflow:visible;
}
buttonspan{
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中有效,你将需要编写一个类触发器。尽管不像图片交换一样糟糕。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
滑动门通用JS滑动门封装类效果预览滑动门滑动门滑动门滑动门滑动门第一层内容第二层内容第三层内容第四层内容第五层内容滑动门滑动门滑动门滑动门滑动门第一层内容第二层
滑动门通用JS滑动门封装类效果预览滑动门滑动门滑动门滑动门滑动门第一层内容第二层内容第三层内容第四层内容第五层内容滑动门滑动门滑动门滑动门滑动门第一层内容第二层
本文实例讲述了js实现左侧网页tab滑动门效果代码。分享给大家供大家参考。具体如下:这是一款开口靠左的网页滑动门,网页滑动门,TAB滑动门,竖排滑动门菜单,竖排
上一篇CSS教程文章:CSS高级技巧:图片替换滑动门(SlidingDoors)还是决定把滑动门单独提作一种单独的技术.它是CSS引入的一项用来创造漂亮且实用的
本文实例讲述了jQuery实现的经典滑动门效果。分享给大家供大家参考。具体如下:这是一款jQuery滑动门,从样式上来说,虽然有些古板,但已经具备了经典的滑动门