主要是实现任何页面只要引入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)");
}
);
}
分享到:
相关推荐
鼠标经过时,上部的图片会从小到大闪动出现,效果极佳,推荐作些修改使用,IE和FF兼容
FF和IE的兼容性问题总结,FF和IE的兼容性问题总结,FF和IE的兼容性问题总结,FF和IE的兼容性问题总结
ie6 ie7 ff浏览器兼容 border:2px solid #00f; /*IE、ff的属性*/ border:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\0; /* IE8支持 */ *border:2px solid #F00; /* IE6、7支持 */ _border:2...
兼容IE FF 省级三级联动 兼容IE FF 省级三级联动 兼容IE FF 省级三级联动 兼容IE FF 省级三级联动
IE与FF的兼容问题 IE浏览器和火狐浏览器兼容问题——CSS篇 IE浏览器和Firefox(火狐)浏览器兼容性——Javascript篇
JavaScript 瀑布流 吸顶 兼容IE FF Chrome
DIV+CSS_IE-FF兼容 DIV+CSS_IE-FF兼容 DIV+CSS_IE-FF兼容 DIV+CSS_IE-FF兼容
详述 针对火狐和Ie,css的兼容。
IE与FF的CSS兼容问题大集合! 解决IE和FF的纯CSS布局的兼容性问题! 简单实用!
IE_FF兼容性进行讲解区分,通过例子分析
在ie6 ie7 ie8 ff浏览器下显示不同的效果,测试的时候很好用哦。
简要说明IE与FF在脚本上的差异!例如事件差异等,具体看文档
兼容IE FF复制粘贴 在IE6、IE7、IE8、FireFox中均测试通过
越来越多的浏览器出现在网上。可是兼容性也出来那,那么我自己总结和从网上搜集到的,可供大家使用!
也许大家为IE 和火狐因为Js的兼容问题而头痛,下面是一些解决兼容的代码,有兴趣的看下
CSS完美兼容IE6/IE7/FF的通用方法 一、CSS HACK 以下两种方法几乎能解决现今所有HACK.
CSS完美兼容IE6IE7FF的通用方法
jsencrypt 兼容IE8,Chrome,FF,包括exports.default,Object.defineProperty不兼容问题处理等。
IE,FF兼容解答,样式的书写,以及规范。
兼容IE,火狐的日历控件,个人感觉不错,支持多国语言,可惜没中文,要用中文的可以自己该中文