js實(shí)現(xiàn)按鈕顏色漸變動(dòng)畫(huà)效果
本文實(shí)例講述了js實(shí)現(xiàn)按鈕顏色漸變動(dòng)畫(huà)效果的方法。分享給大家供大家參考。具體如下:
這里演示js實(shí)現(xiàn)按鈕慢慢變色的方法,鼠標(biāo)移到按鈕上,按鈕的背景色就發(fā)生變化,是慢慢的變化,點(diǎn)擊按鈕會(huì)打開(kāi)指定鏈接,這里主要是演示按鈕變色的代碼實(shí)現(xiàn)方法。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/
具體代碼如下:
<HTML><HEAD><TITLE>按鈕慢慢變色</TITLE> <STYLE type=text/css> BODY { MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋體" } A { FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: black; TEXT-DECORATION: none } A:hover { FONT-WEIGHT: 400; FONT-SIZE: 9pt; COLOR: red; TEXT-DECORATION: underline } A:active { FONT: 9pt "宋體"; CURSOR: hand; COLOR: #ff0033 } .STYLE1 { color: #000099; font-weight: bold; font-family: "華文新魏"; font-size: 30px; } .STYLE2 { color: #FF3399; font-size: 40px; font-family: "華文行楷"; } </STYLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> </HEAD> <BODY bgColor=#fef4d9> <CENTER> <span class="STYLE2">按鈕慢慢變色</span> </CENTER><BR> <CENTER> <TABLE borderColor=#66FF00 border=5 borderlight="green"> <TBODY> <TR> <TD align=middle><span class="STYLE1">效果顯示</span></TD> </TR> <TR> <TD align=middle> <SCRIPT language=JavaScript> hexColor = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; function mOver() { for (i = 0; i < 13; i++) { setTimeout('document.myForm.button.style.background = "#'+hexColor[12-i]+'0'+hexColor[12-i]+'0c0";', i * 40); } } function mOut() { document.myForm.button.value = "進(jìn)入腳本之家"; for (i = 0; i < 12; i++) { setTimeout('document.myForm.button.style.background = "#'+hexColor[i]+'0'+hexColor[i]+'0c0";', i * 40); } } // End --> </SCRIPT> <FORM name=myForm> <input onMouseDown='document.myForm.button.value=" 謝謝"' onMouseOver=mOver() onClick='window.location="http://www.dbjr.com.cn/"' onMouseOut=mOut() type=button value=鼠標(biāo)放在上面 name=button > </FORM></TD></TR></TBODY></TABLE> </CENTER> </BODY> </HTML>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JS實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成可拖動(dòng)的不同顏色塊示例
- JS實(shí)現(xiàn)的按鈕點(diǎn)擊顏色切換功能示例
- JS實(shí)現(xiàn)按鈕顏色切換效果
- Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字與其顏色
- js實(shí)現(xiàn)點(diǎn)擊按鈕后給Div圖層設(shè)置隨機(jī)背景顏色的方法
- JS控制按鈕自動(dòng)切換背景顏色(可暫停)
- 用javascript實(shí)現(xiàn)改變TEXTAREA滾動(dòng)條和按鈕的顏色,以及怎樣讓滾動(dòng)條變得扁平
- js實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成背景顏色
相關(guān)文章
如何基于viewport vm適配移動(dòng)端頁(yè)面
這篇文章主要介紹了如何基于viewport vm適配移動(dòng)端頁(yè)面,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11JavaScript中顏色模型的基礎(chǔ)知識(shí)與應(yīng)用詳解
顏色模型,是用來(lái)表示顏色的數(shù)學(xué)模型。比如最常見(jiàn)的?RGB模型,使用?紅綠藍(lán)?三色來(lái)表示顏色。本文就來(lái)和大家講講JavaScript中顏色模型的基礎(chǔ)知識(shí)與應(yīng)用吧2023-02-02JavaScript數(shù)組問(wèn)題解決的多種方法
JavaScript數(shù)組問(wèn)題多種方法小結(jié),眾多blueidea高手聯(lián)袂打造2008-07-07layui樹(shù)形菜單動(dòng)態(tài)遍歷的例子
今天小編就為大家分享一篇layui樹(shù)形菜單動(dòng)態(tài)遍歷的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09js防抖具體實(shí)現(xiàn)以及詳細(xì)原理步驟說(shuō)明(附實(shí)例)
節(jié)流和防抖這里兩個(gè)詞可能對(duì)一些初入JavaScript的同學(xué)比較陌生,下面這篇文章主要給大家介紹了關(guān)于js防抖具體實(shí)現(xiàn)以及詳細(xì)原理步驟的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09JavaScript中使用document.write向頁(yè)面輸出內(nèi)容實(shí)例
這篇文章主要介紹了JavaScript中使用document.write向頁(yè)面輸出內(nèi)容實(shí)例,本文講解了輸出普通文字、帶HTML標(biāo)簽內(nèi)容的方法,需要的朋友可以參考下2014-10-10JavaScript實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度
這篇文章主要介紹了JavaScript實(shí)現(xiàn)監(jiān)控上傳和下載進(jìn)度,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-05-05如何利用JavaScript獲取字符串中重復(fù)次數(shù)最多的字符
這篇文章主要給大家介紹了關(guān)于如何利用JavaScript獲取字符串中重復(fù)次數(shù)最多的字符的相關(guān)資料,文中介紹了兩種解決方案,分別是使用對(duì)象以及數(shù)組&指針來(lái)實(shí)現(xiàn),需要的朋友可以參考下2021-07-07