凸起的按钮效果 - 快车库

凸起的按钮效果

283 查看

<script language="javascript">  
function movr(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="red"  
borderLeft  = "1px solid buttonhighlight";  
borderRight = "1px solid buttonshadow";  
borderTop  = "1px solid buttonhighlight";  
borderBottom = "1px solid buttonshadow";  
padding   = "0";  
cursor="hand"; 
}  
}  
function mdwn(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="red"  
borderRight  = "1px solid buttonhighlight";  
borderLeft= "1px solid buttonshadow";  
borderBottom  = "1px solid buttonhighlight";  
borderTop = "1px solid buttonshadow";  
padding   = "0";  
}  
}  
function mout(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="black"  
background = "buttonface"; //此为鼠标移动后的颜色，可根据需要改变 
border = "1px solid buttonface";  
padding   = "0";  
}  
}  
</script>

<table bgcolor="buttonface" width="100">  
<tr>  
<td bgcolor="buttonface" name="cool" onmousedown="mdwn(this)" onmouseout="mout(this)" onmouseover="movr(this)" onmouseup="movr(this)" width="100%">  
button  
</td>  
<td bgcolor="buttonface" onmousedown="mdwn(this)" onmouseout="mout(this)" onmouseover="movr(this)" onmouseup="movr(this)" width="100%">  
button  
</td>  
<td bgcolor="buttonface" onmousedown="mdwn(this)" onmouseout="mout(this)" onmouseover="movr(this)" onmouseup="movr(this)" width="100%">  
button  
</td>  
<td bgcolor="buttonface" onmousedown="mdwn(this)" onmouseout="mout(this)" onmouseover="movr(this)" onmouseup="movr(this)" width="100%">  
button  
</td>  
</tr>  
</table>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

<script language="javascript">  
function movr(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="red"  
borderLeft  = "2px solid buttonhighlight";  
borderRight = "2px solid buttonshadow";  
borderTop  = "2px solid buttonhighlight";  
borderBottom = "2px solid buttonshadow";  
padding   = "0";  
cursor="hand"; 
}  
}  
function mdwn(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="red"  
borderRight  = "1px solid buttonhighlight";  
borderLeft= "1px solid buttonshadow";  
borderBottom  = "1px solid buttonhighlight";  
borderTop = "1px solid buttonshadow";  
padding   = "0";  
}  
}  
function mout(src)  
{    src.onselectstart = new Function("return false");  
with (src.style) {  
        color="black"  
background = "buttonface"; //此为鼠标移动后的颜色，可根据需要改变 
border = "1px solid buttonface";  
padding   = "0";  
}  
}  
</script>

<table bgcolor="buttonface" cellspacing="16" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=blue,endColorStr=white);" width="60">  
<tr>  
<td bgcolor="buttonface" name="cool" onmousedown="mdwn(this)" onmouseout="mout(this)" onmouseover="movr(this)" onmouseup="movr(this)" width="100%">  
<font face="微软简行楷" size="4"><font color="#FF0080">鹤</font><font color="#AA55AA">发</font><font color="#55AAD4">童</font><font color="gold">颜</font></font> 
</td>  
<td bgcolor="buttonface" onmousedown="mdwn(this)" onmouseout="mout(this)" onmouseover="movr(this)" onmouseup="movr(this)" width="100%">  
<font face="微软简行楷" size="4"><font color="#FF00FF">青</font><font color="#0080FF">梅</font><font color="#55C000">竹</font><font color="#FF0000">马</font></font> 
</td>  
<td bgcolor="buttonface" onmousedown="mdwn(this)" onmouseout="mout(this)" onmouseover="movr(this)" onmouseup="movr(this)" width="100%">  
<b><font color="#FF0000">知</font><font color="#55C000">往</font><font color="#0080FF">观</font><font color="#FF00FF">来</font></b> 
</td>  
<td bgcolor="buttonface" onmousedown="mdwn(this)" onmouseout="mout(this)" onmouseover="movr(this)" onmouseup="movr(this)" width="100%">  
<b><font color="Red">金</font></b><b><font color="green">翅</font></b><b><font color="orange">擘</font></b><b><font color="blue">海</font></b>
<b> 
</b></td>  
</tr>  
</table>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

最近更新的内容

CSS Gradient详解
JS核心系列：浅谈 call apply 与 bind
JS核心系列：浅谈原型对象和原型链
利用bootstrap的modal组件自定义alert，confirm和modal对话框
前端工程师是怎样一种职业
详解Javascript中的Object对象
JavaScript 开发最佳实践
谈笑风生组件化
彻底理解js中this的指向
javascript 作用域和 this 关键字

你可能感兴趣的文章

6本值得一读的JavaScript英文电子书
在JavaScript中一切都是对象吗？
使用 SVG 输出 Octicon
如何压缩 HTTP 请求正文
谈谈 HTTP/2 的协议协商机制
console对象–详解
HTTP 412 错误 – 先决条件失败 (Precondition failed)
调试时屏蔽JavaScript库代码 –Chrome DevTools Blackbox功能介绍
CSS vs JS动画：谁更快？
Web开发者色彩搭配快速指南

2025 - 快车库 - 我的知识库重庆启连科技有限公司渝ICP备16002641号-10
企客连连表单助手企服开发榜单123

渝公网安备 50010702501581号