`

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

    博客分类:
  • js
阅读更多

主要是实现任何页面只要引入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)");
		}
	 );
}

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics