Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Средний цвет между двумя цветами (https://javascript.ru/forum/jquery/53468-srednijj-cvet-mezhdu-dvumya-cvetami.html)

raler 05.02.2015 09:23
Средний цвет между двумя цветами
 
Всем привет!
Хотел поинтересоваться. Есть несколько блоков, идущих друг за другом.
Нужно, чтобы задав 2 цвета, блоки заливались цветами, перетекающими от первого цвета к другому.

Возможно ли это сделать?

danik.js 05.02.2015 09:48 
<style>
div{
    height: 100px;
    background: #F00;
    transition: background-color 0.5s;
}
div:hover{
    background: #0F0;
}
</style>
<div></div>

ksa 05.02.2015 10:05
Цитата:
Сообщение от raler
Нужно, чтобы задав 2 цвета, блоки заливались цветами, перетекающими от первого цвета к другому.
Ты картинкой челе такое покажи...

рони 05.02.2015 10:39
Цитата:
Сообщение от raler
Возможно ли это сделать?
да - (где то было)

рони 05.02.2015 11:41
Градиент блоков
 
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="https://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>

raler 05.02.2015 14:25
Цитата:
Сообщение от рони (Сообщение 355108)
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>
То, что нужно, спасибо


Часовой пояс GMT +3, время: 12:58.