JS實(shí)現(xiàn)顏色動(dòng)態(tài)淡化效果
效果圖:
代碼如下:
<html> <head> <title>顏色變換</title> <style type="text/css"> div{width:100px;height:100px;margin:100px auto;border:1px solid white;border-radius:50%;} input{position:absolute;left:100px;top:100px;} </style> </head> <body> <input type="button" value="點(diǎn)擊執(zhí)行顏色淡化效果"/> <script type="text/javascript"> var a=255,b=165,c=0,w=100,box; function cont() { a=255; b=165; c=0; w=100; box = document.createElement('div'); document.body.appendChild(box); } function changeColor() { document.getElementsByTagName('input')[0].disabled="disabled"; box.style.backgroundColor="RGB("+a+","+b+","+c+")"; box.style.width=w; box.style.height=w; c++; if(c>=166)b++; w++; if(a>=255&&b>255&&c>255) { box.parentNode.removeChild(box); document.getElementsByTagName('input')[0].removeAttribute('disabled'); return false; } setTimeout(changeColor,1); } document.getElementsByTagName('input')[0].onclick=function() { cont(); changeColor(); } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- JS Tween 顏色漸變
- 利用遞增的數(shù)字返回循環(huán)漸變的顏色的js代碼
- js+HTML5實(shí)現(xiàn)canvas多種顏色漸變效果的方法
- js實(shí)現(xiàn)按鈕顏色漸變動(dòng)畫(huà)效果
- javascript實(shí)現(xiàn)顏色漸變的方法
- JS實(shí)現(xiàn)的顏色實(shí)時(shí)漸變效果完整實(shí)例
- 神奇!js+CSS+DIV實(shí)現(xiàn)文字顏色漸變效果
- JavaScript 顏色梯度和漸變效果
- Javascript 顏色漸變效果的實(shí)現(xiàn)代碼
- 漂亮! js實(shí)現(xiàn)顏色漸變效果
相關(guān)文章
原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式示例
這篇文章主要介紹了原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式,結(jié)合具體實(shí)例形式分析了javascript循環(huán)遍歷Nodelist Dom列表的常用操作技巧,需要的朋友可以參考下2018-02-02js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子
這篇文章介紹了js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子,有需要的朋友可以參考一下2013-10-10Javascript 訪問(wèn)樣式表實(shí)現(xiàn)代碼
Javascript訪問(wèn)樣式表--又一篇好文章2009-08-08JavaScript/jQuery實(shí)現(xiàn)切換頁(yè)面效果
這篇文章主要為大家詳細(xì)介紹了JavaScript或jQuery實(shí)現(xiàn)切換頁(yè)面效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03JavaScript 無(wú)縫上下左右滾動(dòng)加定高定寬停頓效果(兼容ie/ff)
JavaScript 指定寬度高度的無(wú)間斷滾動(dòng)實(shí)現(xiàn)代碼,這樣的效果適合作為焦點(diǎn)新聞的輪播顯示。2010-03-03解決layui的radio屬性或別的屬性沒(méi)顯示出來(lái)的問(wèn)題
今天小編就為大家分享一篇解決layui的radio屬性或別的屬性沒(méi)顯示出來(lái)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09解決使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò):error:Bootstrap dropdown require
這篇文章主要介紹了使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò):error:Bootstrap dropdown require Popper.js ,小編把問(wèn)題描述和解決方案分享給大家,需要的朋友可以參考下2018-08-08