主要是实现任何页面只要引入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)");
}
);
}
分享到:
相关推荐
1. **事件监听**:在JavaScript中,我们可以使用`addEventListener`或`attachEvent`(IE浏览器早期版本)方法来监听用户的交互事件,如鼠标移动`mousemove`、鼠标按下`mousedown`和鼠标释放`mouseup`。这些事件结合...
解决这个问题可能需要进一步调试和优化,例如将事件绑定到整个`body`元素,或者检查CSS样式以确保鼠标滚轮事件可以在任何地方生效。 总结来说,这个JavaScript实例展示了如何利用浏览器的事件系统和DOM API,实现跨...
25.jquery鼠标移动出现下拉菜单及提示特效代码 26.jquery外国滚动型多级展开菜单插件(jGlideMenu)下载 27.jquery自由滚动切换 标签式导航菜单示例 28.博客Blog横向jquery动态滑动菜单插件示例 29.打包50种...
支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...
支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: ...
4、新增“类_通用对话框”支持大窗口样式与易自带样式,2种选择。用法和易一样,完全可以替代。 5、新增“进程_取句柄数”,功能与XP系统下任务管理器一样。 6、新增“进程_取IO读取计数”,功能与XP系统下任务管理器...