js實作按鈕顏色漸層動畫效果_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

js實作按鈕顏色漸層動畫效果_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:44 PM

js 動畫漸變

本文實例講述了js實現按鈕顏色漸變動畫效果的方法。分享給大家供大家參考。具體如下：

這裡示範js實現按鈕慢慢變色的方法，滑鼠移到按鈕上，按鈕的背景色就發生變化，是慢慢的變化，點擊按鈕會打開指定鏈接，這裡主要是演示按鈕變色的程式碼實現方法。

運作效果截圖如下：

線上示範網址如下：

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 = "进入脚本之家";
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.jb51.net/"' onMouseOut=mOut() type=button value=鼠标放在上面 name=button >
  </FORM></TD></TR></TBODY></TABLE>
</CENTER>
</BODY>
</HTML>

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

動畫不工作在PowerPoint中[修復] Feb 19, 2024 am 11:12 AM

您是否正在嘗試製作演示文稿，但無法添加動畫？如果動畫在你的WindowsPC上的PowerPoint中不起作用，那麼這篇文章將會幫助你。這是一個常見的問題，許多人都在抱怨。例如，在Microsoft團隊中演示或在螢幕錄製期間，動畫可能會停止運作。在本指南中，我們將探索各種故障排除技術，以協助您修復在Windows上的PowerPoint中無法運作的動畫。為什麼我的PowerPoint動畫不起作用？我們注意到Windows上PowerPoint中的動畫可能無法運作問題的一些可能原因如下：由於個

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

ppt動畫如何設定先進入再退出 Mar 20, 2024 am 09:30 AM

我們在日常的辦公中常常會使用到ppt，那麼你是否對ppt裡邊的每個操作功能都很了解呢？例如：ppt中怎麼設定動畫效果、怎麼設定切換效果、每個動畫的效果長度是多少？每個投影片能不能自動播放、ppt動畫先進入再退出等等，那麼今天這期我就先跟大家分享ppt動畫先進入再退出的具體操作步驟，就在下方，小伙伴們快來看一看吧！ 1.首先，我們在電腦中開啟ppt，點選文字方塊外側選取文字框，（如下圖紅色圈出部分所示）。 2.然後，點選選單列中的【動畫】，選取【擦除】的效果，（如圖紅色圈出部分所示）。 3.接下來，點擊【

如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖股票蠟燭圖是股票市場中常見的技術分析圖形，透過繪製股票的開盤價、收盤價、最高價和最低價等數據，幫助投資者更直觀地了解股票的價格波動情形。本文將教你如何使用PHP和JS創建股票蠟燭圖，並附上具體的程式碼範例。一、準備工作在開始之前，我們需要準備以下環境：1.一台運行PHP的伺服器2.一個支援HTML5和Canvas的瀏覽器3

跳票 2 年，國產 3D 動畫電影《二郎神之深海蛟龍》定檔 7 月 13 日 Jan 26, 2024 am 09:42 AM

本站1月26日消息，國產3D動畫電影《二郎神之深海蛟龍》發布一組最新劇照，正式宣布將於7月13日上映。據了解，《二郎神之深海蛟龍》是由迷狐星（北京）動漫有限公司、霍爾果斯眾合千澄影業有限公司、浙江橫店影業有限公司、浙江共贏影業有限公司、成都天火科技有限公司、華文映像（北京）影業有限公司出品，王君執導的動畫電影，原定2022年7月22日在中國大陸上映。本站劇情簡介：封神之戰後，姜子牙攜「封神榜」分封諸神，而後封神榜被天庭封印於九州祕境深海之下。事實上，除了分封神位，封神榜中還封緘著眾多強大的妖邪元

宮崎駿動畫電影《紅豬》延長上映至明年 1 月 16 日，豆瓣 8.6 分 Dec 18, 2023 am 08:07 AM

本站消息，宮崎駿動畫電影《紅豬》宣布將上映時間延長至2024年1月16日本站先前報道，《紅豬》已於11月17日登陸全國藝聯專線影院，累計票房超2000萬，豆瓣評分8.6分，4、5星好評佔85.8%。《紅豬》由吉卜力工作室製作，宮崎駿執導，森山週一郎、加藤登紀子、大塚明夫、岡村明美等參與配音，最初於1992年在日本上映。該片改編自宮崎駿漫畫作品《飛行艇時代》，講述了義大利空軍的王牌飛行員波魯克・羅森被施了魔法變成了一頭豬。之後，他成為了一位賞金獵人，打擊空中劫匪，保護身邊人。劇情簡介：羅森是一戰中

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

See all articles

js實作按鈕顏色漸層動畫效果_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題