js通過更改按鈕的顯示樣式實(shí)現(xiàn)按鈕的滑動(dòng)效果
更新時(shí)間:2014年04月23日 16:40:45 作者:
使用js實(shí)現(xiàn)按鈕的滑動(dòng)效果,通過更改按鈕的顯示樣式,來(lái)實(shí)現(xiàn)按鈕動(dòng)態(tài)滑動(dòng),需要的朋友可以參考下
通過更改按鈕的顯示樣式,來(lái)實(shí)現(xiàn)按鈕動(dòng)態(tài)滑動(dòng)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<style>
.search{ background:#008800; color:#fff; border:none; height:26px; line-height:20px; width:63x;}
.searchhover{background:#000099; color:#fff; border:none; height:26px; line-height:20px; width:63px; }
</style>
</head>
<body onload="js()">
<input type="button" id="btn" class="search" name="btn" value="登 錄"/>
<input type="button" id="btn2" class="search" name="btn" value="注 銷"/>
<script type="text/javascript" >
function js()
{
// 使ie6 button支持hover屬性 obj是要支持hover的實(shí)體 hover是btn:hover的樣式,init是初始樣式
obj="btn";
alert(navigator.appName);
if(navigator.appName == "Microsoft Internet Explorer" && parseFloat(navigator.appVersion) == 4){// 判斷ie6
var o = document.getElementsByName(obj);
for(var i=0;i<o.length;i++){
if(o[i].type == "button"){
//o[i].className = "search";
o[i].onmouseover = function(){ this.className = "searchhover"}
o[i].onmouseout = function(){ this.className = "search"};
}
}
}
}
</script>
</body>
</html>
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
</head>
<style>
.search{ background:#008800; color:#fff; border:none; height:26px; line-height:20px; width:63x;}
.searchhover{background:#000099; color:#fff; border:none; height:26px; line-height:20px; width:63px; }
</style>
</head>
<body onload="js()">
<input type="button" id="btn" class="search" name="btn" value="登 錄"/>
<input type="button" id="btn2" class="search" name="btn" value="注 銷"/>
<script type="text/javascript" >
function js()
{
// 使ie6 button支持hover屬性 obj是要支持hover的實(shí)體 hover是btn:hover的樣式,init是初始樣式
obj="btn";
alert(navigator.appName);
if(navigator.appName == "Microsoft Internet Explorer" && parseFloat(navigator.appVersion) == 4){// 判斷ie6
var o = document.getElementsByName(obj);
for(var i=0;i<o.length;i++){
if(o[i].type == "button"){
//o[i].className = "search";
o[i].onmouseover = function(){ this.className = "searchhover"}
o[i].onmouseout = function(){ this.className = "search"};
}
}
}
}
</script>
</body>
</html>
相關(guān)文章
javascript中attachEvent用法實(shí)例分析
這篇文章主要介紹了javascript中attachEvent用法,實(shí)例分析了javascript中事件綁定的相關(guān)技巧,需要的朋友可以參考下2015-05-05JavaScript獲得url所有參數(shù)鍵值表的方法
這篇文章主要介紹了JavaScript獲得url所有參數(shù)鍵值表的方法,實(shí)例分析了javascript操作URL的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03微信小程序返回到頂部功能的簡(jiǎn)單實(shí)現(xiàn)
在做微信小程序開發(fā)時(shí),遇到一個(gè)問題,要如何實(shí)現(xiàn)返回頂部的功能,下面這篇文章主要給大家介紹了微信小程序返回到頂部功能的簡(jiǎn)單實(shí)現(xiàn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11用JavaScript做一個(gè)簡(jiǎn)易計(jì)算器的三種方法舉例
這篇文章主要給大家介紹了關(guān)于用JavaScript做一個(gè)簡(jiǎn)易計(jì)算器的三種方法,JS中實(shí)現(xiàn)一個(gè)簡(jiǎn)單的計(jì)算器并不困難,我們只需利用基本的數(shù)學(xué)運(yùn)算符和JavaScript的語(yǔ)法即可,需要的朋友可以參考下2023-10-10javascript SocialHistory 檢查訪問者是否訪問過某站點(diǎn)
今天delicious上這個(gè)名為 SocialHistory 的腳本十分引人注目。源代碼可以在這里下載。這段js代碼的功能就是判斷你的用戶有沒有訪問過某個(gè)網(wǎng)站。使用方法很簡(jiǎn)單,例如:2008-08-08JS實(shí)現(xiàn)基于Sketch.js模擬成群游動(dòng)的蝌蚪運(yùn)動(dòng)動(dòng)畫效果【附demo源碼下載】
這篇文章主要介紹了JS實(shí)現(xiàn)基于Sketch.js模擬成群游動(dòng)的蝌蚪運(yùn)動(dòng)動(dòng)畫效果,涉及Sketch.js插件的使用及HTML5元素的應(yīng)用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-08-08CSS和Javascript簡(jiǎn)單復(fù)習(xí)資料
CSS和Javascript簡(jiǎn)單復(fù)習(xí)資料,學(xué)習(xí)css與js的朋友可以參考下。2010-06-06