JS+CSS實(shí)現(xiàn)的漂亮漸變背景特效代碼(6個(gè)漸變效果)
本文實(shí)例講述了JS+CSS實(shí)現(xiàn)的漂亮漸變背景特效代碼。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
<html> <head> <title> JS配合CSS實(shí)現(xiàn)的漂亮漸變背景特效6個(gè)實(shí)例 </title> <script> var setGradient = (function() { var p_dCanvas = document.createElement('canvas'); var p_useCanvas = !!(typeof(p_dCanvas.getContext) == 'function'); var p_dCtx = p_useCanvas ? p_dCanvas.getContext('2d') : null; var p_isIE = /*@cc_on!@*/ false; try { p_dCtx.canvas.toDataURL() } catch(err) { p_useCanvas = false; }; if (p_useCanvas) { return function(dEl, sColor1, sColor2, bRepeatY) { if (typeof(dEl) == 'string') dEl = document.getElementById(dEl); if (!dEl) return false; var nW = dEl.offsetWidth; var nH = dEl.offsetHeight; p_dCanvas.width = nW; p_dCanvas.height = nH; var dGradient; var sRepeat; if (bRepeatY) { dGradient = p_dCtx.createLinearGradient(0, 0, nW, 0); sRepeat = 'repeat-y'; } else { dGradient = p_dCtx.createLinearGradient(0, 0, 0, nH); sRepeat = 'repeat-x'; } dGradient.addColorStop(0, sColor1); dGradient.addColorStop(1, sColor2); p_dCtx.fillStyle = dGradient; p_dCtx.fillRect(0, 0, nW, nH); var sDataUrl = p_dCtx.canvas.toDataURL('image/png'); with(dEl.style) { backgroundRepeat = sRepeat; backgroundImage = 'url(' + sDataUrl + ')'; backgroundColor = sColor2; }; } } else if (p_isIE) { p_dCanvas = p_useCanvas = p_dCtx = null; return function(dEl, sColor1, sColor2, bRepeatY) { if (typeof(dEl) == 'string') dEl = document.getElementById(dEl); if (!dEl) return false; dEl.style.zoom = 1; var sF = dEl.currentStyle.filter; dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient( GradientType=', +( !! bRepeatY), ',enabled=true,startColorstr=', sColor1, ', endColorstr=', sColor2, ')'].join(''); }; } else { p_dCanvas = p_useCanvas = p_dCtx = null; return function(dEl, sColor1, sColor2) { if (typeof(dEl) == 'string') dEl = document.getElementById(dEl); if (!dEl) return false; with(dEl.style) { backgroundColor = sColor2; }; } } })(); </script> <style> body{font:0.75em/1.4 Arial;text-align:left;margin:20px;} hr{clear:both;visibility:hidden;} xmp{font:12px/12px "Courier New";background:#fff;color:#666; border:solid 1px #ccc;} div.example{ border:solid 1px #555;margin:0 20px 20px 0;float:left; display:inline;margin:1em;background:#fff;width:300px;padding:40px;color:#222;font:xx-small/1.2 "Tahoma";text-align:justify;} </style> <body> <div id="example1" class="example"> CSS特效代碼。 </div> <div id="example2" class="example"> 各類編程源碼、 </div> <div id="example3" class="example"> 精品軟件 </div> <div id="example4" class="example"> 上海世博園 </div> <div id="example5" class="example"> 我家北京天安門(mén) </div> <div id="example6" class="example"> 北京歡迎您! </div> <script> setGradient('example1', '#4ddbbe', '#d449cc', 1); setGradient('example2', '#46ddbd', '#d8b617', 0); setGradient('example3', '#c81fc1', '#bf445f', 1); setGradient('example4', '#2285e5', '#d769eb', 0); setGradient('example5', '#8b4286', '#eac87d', 1); setGradient('example6', 'black', 'white', 0); </script> </body> </html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript實(shí)現(xiàn)拖拽并替換網(wǎng)頁(yè)塊元素
實(shí)現(xiàn)類似于學(xué)生換座位的效果,將網(wǎng)頁(yè)內(nèi)的兩個(gè)元素通過(guò)拖拽的方式互換。2009-11-11利用ES6實(shí)現(xiàn)單例模式及其應(yīng)用詳解
單例是在程序設(shè)計(jì)非?;A(chǔ)的東西,這篇文章主要給大家介紹了關(guān)于利用ES6實(shí)現(xiàn)單例模式及其應(yīng)用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12詳解使用mocha對(duì)webpack打包的項(xiàng)目進(jìn)行"冒煙測(cè)試"的大致流程
這篇文章主要介紹了詳解使用mocha對(duì)webpack打包的項(xiàng)目進(jìn)行"冒煙測(cè)試"的大致流程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04JavaScript變量or循環(huán)中的var和let詳解
這篇文章主要介紹了JavaScript變量or循環(huán)中的var和let詳解,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-09-09sessionStorage存儲(chǔ)時(shí)多窗口之前能否進(jìn)行狀態(tài)共享解析
這篇文章主要為大家介紹了sessionStorage存儲(chǔ)時(shí)多窗口之前能否進(jìn)行狀態(tài)共享解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02window.dialogArguments 使用說(shuō)明
window.dialogArguments 使用說(shuō)明,需要的朋友可以參考下。2011-04-04javascript字符串拆分成單個(gè)字符相加和不超過(guò)10,求最終值
javascript字符串拆分成單個(gè)字符相加和不超過(guò)10,求最終值2008-09-09JS+CSS實(shí)現(xiàn)自動(dòng)改變切換方向圖片幻燈切換效果的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)自動(dòng)改變切換方向圖片幻燈切換效果的方法,實(shí)例分析了javascript操作圖片切換方向的幻燈片技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03淺析IE10兼容性問(wèn)題(frameset的cols屬性)
主頁(yè)用frameset嵌了兩個(gè)頁(yè)面,左側(cè)為菜單欄,可以通過(guò)改變 frameset的cols來(lái)收縮。別的瀏覽器正常,但I(xiàn)E10卻沒(méi)任何的反應(yīng)2014-01-01