سلام.
من دیروز یه تابع نوشتم برای اینکه یه پس زمینه ی گرادینت درست کنه، البته با جاوااسکریپت، خوبیش هم اینه که دیگه نیاز به ساختن عکس توسط نرم افزارهای گرافیکی رو نداره.
این تابع cross browser هست و با تمامی مرورگرهای معروف فعلی همخوانی داره.
تابعی رو که نوشتم کدش زیر هست:
یه توضیح هم در رابطه با طرز استفاده از این تابع:
/*
* Name : eGradient.js
* Desc : create gradient background with javascript, eGradient is cross browser
* Copyright (c) 2008 eAmin ( eAmin.js [at] gmail [dot] com )
* Build Date : 10/25/2008
*/
function eGradient(elm) {
var options = {
startPoint:'',
endPoint :''
};
var elm = document.getElementById(elm);
for (var i in options) {
if (!options[i]) {
options[i] = arguments[1][i];
}
}
if (!!window.ActiveXObject) {
elm.style.filter = "progid:DXImageTransform.Microsoft.Gradient(startC olorStr="+options.startPoint+",endColorStr="+optio ns.endPoint+",gradientType=0)";
} else {
var canvas = document.createElement("canvas"), ctx = canvas.getContext("2d");
canvas.style.width = parseInt(elm.style["width"]);
canvas.style.height = parseInt(elm.style["height"]);
elm.appendChild(canvas);
var linergradient = ctx.createLinearGradient(0, 0, 0, parseInt(canvas.height));
linergradient.addColorStop(0, options.startPoint);
linergradient.addColorStop(1, options.endPoint);
ctx.fillStyle = linergradient;
ctx.fillRect(0, 0, parseInt(canvas.width), parseInt(canvas.height));
}
}
آرگومان elm: این آرگومان وظیفه داره تا اون المنتی که شما قصد ایجاد پس زمینه ی گرادینت رو دارید، id المنت مربوطه رو بگیره.
آبجکتهای startPoint و endPoint:
startPoint: رنگ شروع کننده.
endPoint: رنگ پایان دهنده.
اینم یه Sample:
سوالی داشتید در خدمتم.کد HTML:<html> <head> <script type="text/javascript" src="gradient.js"></script> <script type="text/javascript"> window.onload = function() { eGradient('egrad', { startPoint: '#ffffff', endPoint: '#000000' }); }; </script> </head> <body> <div id="egrad" style="width:100px; height: 100px;"></div> </body> </html>
پاسخ با نقل قول
