六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 31|回复: 0

IE,FF兼容的鼠标移动样式转换

[复制链接]

升级  80.67%

49

主题

49

主题

49

主题

秀才

Rank: 2

积分
171
 楼主| 发表于 2013-1-29 07:36:40 | 显示全部楼层 |阅读模式
主要是实现任何页面只要引入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;//判断是否IEvar isFF=(!isIE);//判断是否FFif (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)");} );} 
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表