主要是实现任何页面只要引入class="button1的样式,设置按钮的样式和控制鼠标移出、移进样式和动作。JS使用的是Jquery框架.
html页面需要引入连个js文件按:
<script type="text/javascript" language="Javascript" src="jquery.js"></script>
<script type="text/javascript" language="Javascript" src="index.js"></script>
html代码
<table width="529" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="525"> <input type="submit" name="Submit" value="提交" class="button1" />
<input type="button" name="Submit2" value="按钮" class="button1"/>
<input type="reset" name="Submit3" value="重置" class="button1" /></td>
</tr>
</table>
index.js代码:
var isIE=document.all? true:false;//判断是否IE var isFF=(!isIE);//判断是否FF if (isIE){window.attachEvent("onload", init);}else{window.addEventListener("load", init, false);} window.attachEvent("onload", init); function init(){ var buttonObj=$("input"); if(buttonObj.attr("class")=="button1"){ buttonObj.css("height","25px"); buttonObj.css("width","66px"); buttonObj.css("cursor","0px"); buttonObj.css("border","12px"); buttonObj.css("color","#FFFFFF"); buttonObj.css("background","transparent"); buttonObj.css("background-image","url(button_h3_03.png)"); } buttonObj.hover( function (event) { //放上去 $(event.target).css("background-image", "url(button_h3_02.png)"); }, function (event) { //移开 $(event.target).css("background-image", "url(button_h3_03.png)"); } ); buttonObj.click( //单击 function (event) { $(event.target).css("background-image", "url(button_h3_01.png)"); } ); }