Estipois Posted January 24, 2009 Report Share Posted January 24, 2009 Sveiki Javascripta Guru! Es kaa pilniigs Javscript (un diemzheel arii visu paareejo web shtelliishu) nespeciaalists luudzu Juusu paliidziibu shaadaa kjibelee: Apraksts: Tiek taisiita lapa, kuraa pogaam dizaina konceptaa ir uzlikts gradient efekts. Parcik pogu daudz (ap 40), tad svara ekonomijas noluukaa noleemu atrast netaa risinaajumu. Atradu. BET ir visaadi BET! Javasripts uztaisa gradiento fonu <div>, bet tas ir piesaistiits <div> id. Ja buutu piesaistiits class tad vareetu uztaisiit taa ka ir tikai 2as klases un miers. tachu tagad sanaak taisiit 60 atsevishkjus skriptus. Skripts: <!-- Gradient div bgr --> <script language="javascript" type="text/javascript"> var setGradient = (function(){ //private variables; 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; //test if toDataURL() is supported by Canvas since Safari may not support it 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; // Create gradients 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; }; //alert('your browser does not support gradient effet'); } } })(); </script> <body> <div class="poga" id="a1"> Bla bla bla</div> <div class="poga" id="p1"> Bla bla bla</div> </body> </html> <script language="javascript" type="text/javascript"> setGradient('a1','#E40091','#1F1F1F',0); </script> <script language="javascript" type="text/javascript"> setGradient('p1','#525252','#1F1F1F',0); </script> Ko neprotu: Neprotu partaisiit javascript taa lai maina claass nevis id! Ja tas buutu, tad kaa uztaisiit lai onmouseover <div> nomainiitos class? Esiet tik laipni - izpaliidzat! p.S. ceru ka kaads uzrakstiis kko stilaa - ai nu tas taksh vienkaarshi :) Link to comment Share on other sites More sharing options...
NiTrino Posted January 25, 2009 Report Share Posted January 25, 2009 OMG! kādēļ gan neizgriezt 1x40px bildīti un neuzlikt <button> kā background ar repeat-x??? Link to comment Share on other sites More sharing options...
Recommended Posts