raler,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 80px;
height: 80px;
float: left;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
function gradient(from, to, num) {
var arr = [];
num--;
for (var i = 0; i <= num; i++) {
var color = [],
l = from.length;
for (var k = 0; k < l; k++) {
color[k] = (to[k] - from[k]) * (i / num) + from[k];
k < 3 && (color[k] = Math.round(color[k]))
}
arr[i] = 'rgb' + (l == 4 ? 'a(' : '(') + color + ')';
}
return arr
}
var base = gradient([0, 0, 255, .9], [255, 0, 255, .3], 10)//или gradient([0, 0, 255], [255, 0, 255], 10)
$.each(base, function(indx, el) {
$('<div/>', {
css: {
'background-color': el
}
}).appendTo('body')
});
});
</script>
</head>
<body>
</body>
</html>
|