Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 1, средняя оценка - 5.00
andyj
65 / 47 / 6
Регистрация: 16.03.2017
Сообщений: 599
20.12.2017, 07:13 #61
div-кнопка с бортиками с управляемым углом освещения. ("проба пера")

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!doctype html><html><head><title>Angle Light</title><meta charset='utf-8' />
<style type="text/css">
.button1{
    padding: 13px; margin: 13px;
    color:#000000;
    background: #eeeeee;
    border: 14px solid #888888;
}
</style>
</head>
<body>
 
<div class="button1" id="button1">text1</div>
<div class="button1" id="button2">text2</div>
<div class="button1" id="button3">text3</div>
    
<script>
    function angleColor(btn, angle){
        if(angle==null) angle=30;
        angle = angle*Math.PI/180;
        var t=(150+50*Math.sin(angle)).toFixed(0);
        var l=(150+50*Math.cos(angle)).toFixed(0);
        var r=(150-50*Math.cos(angle)).toFixed(0);
        var b=(150-50*Math.sin(angle)).toFixed(0);
        btn.style.borderTopColor = 'rgb('+t+', '+t+', '+t+')';
        btn.style.borderLeftColor = 'rgb('+l+', '+l+', '+l+')';
        btn.style.borderRightColor = 'rgb('+r+', '+r+', '+r+')';
        btn.style.borderBottomColor = 'rgb('+b+', '+b+', '+b+')';
    }
 
    var angle=0;
    function onTimer(){
        angleColor(document.getElementById("button1"), angle);
        angleColor(document.getElementById("button2"), angle);
        angleColor(document.getElementById("button3"), angle);
        angle=(angle+2)%360;
    }
    onTimer()
    setInterval(onTimer, 30);
</script>
 
</body></html>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.12.2017, 07:13
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Обмен готовыми решениями (JavaScript):

Обмен между фреймами - JavaScript
ситуация такова есть страница, на ней два фрейма в левом фрейме страница левого сайта с формой заполнения справа фрейм с локальной...

Как организовать обмен сообщениями - JavaScript
В общем, суть такова. Как лучше всего проверять новые записи в БД? Чат типо ICQ или как в ВК сообщениями обмениваются. Само собой...

обмен файлами без фактической передачи - JavaScript
на хосте лежит искомый файл и рассчёт числа ПИ до миллиардного знака. программа сравнивает последовательности бит файла и числа ПИ,...

Обмен данными между двумя сервисами - JavaScript
Здравствуйте. Стоит перед до мной одна задача. В системе amocrm создать виджет. Сам он пишет на JS. В нем я новичек. Цель виджета брать...

Ajax Comet, мгновенный обмен личными сообщениями - JavaScript
Всем привет,я хочу написать мгновенный обмен личными сообщениями,типо как у &quot;Вконтакте&quot;, но не могу разобраться с ajax &quot;comet&quot;,кто может...

Обмен готовыми решениями - Web-дизайн
Привет, мир! Предлагаю здесь обмениваться готовыми решениями, исключительно html + css. Итак, вот сверстал необычный дизайн, без...

62
8Observer8
2032 / 1321 / 183
Регистрация: 05.10.2013
Сообщений: 4,180
Записей в блоге: 56
11.01.2018, 00:38 #62
Предлагаю делиться проектами/примерами на Three.js и Babylon.js в этой теме: Проекты на Three.js и Babylon.js
0
Eva Rosalene
Male-to-Female
4049 / 1586 / 242
Регистрация: 06.01.2013
Сообщений: 4,177
Завершенные тесты: 1
19.03.2018, 21:14 #63
Хак transition для width/height: auto.
На backquote вместо нормальных кавычек внимания не обращайте, клавиатура приказала долго жить.

Перед изменением контента использовать .lockBounds, после - .fitContent(duration).
Настоятельная рекомендация вместо вызова конструктора использовать AutoBoundsTransition.for(element), либо упрощённую обёртку AutoBoundsWrapper(element, duration) с методом .resize(callback), передавая в callback функцию, которая и производит изменение размеров элемента.

Совместимость: ES6+.
Версия для ES5 после транспайла бабелем - под спойлером, требует babel-polyfill.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
class AutoBoundsTransition {
  static for(node) {
    if (!this._context) this._context = new WeakMap();
    if (!this._context.has(node)) this._context.set(node, new this(node));
    
    return this._context.get(node);
  }
  
  pRequestAnimationFrame() {
    return new Promise(resolve => requestAnimationFrame(resolve));
  }
  
  constructor(node) {
    this.node = node;
  }
  
  lockBounds() {
    this.lockedWidth = this.node.getBoundingClientRect().width;
    this.lockedHeight = this.node.getBoundingClientRect().height;
    
    this.oldHeight = this.node.style.height;
    this.oldWidth = this.node.style.width;
    
    this.node.style.width = this.lockedWidth + `px`;
    this.node.style.height = this.lockedHeight + `px`;
  }
  
  waitTransitionFinish() {
    let resolve = null;
    let promise = new Promise(res => resolve = res);
    
    this.node.addEventListener(`transitionend`, function listener(event) {
      event.target.removeEventListener(`transitionend`, listener, true);
      resolve();
    }, true);
    return promise;
  }
  
  async fitContent(duration) {
    let oldTransition = this.node.style.transition;
    this.node.style.height = this.oldHeight;
    this.node.style.width = this.oldWidth;
    
    await this.pRequestAnimationFrame();
    let newWidth = this.node.getBoundingClientRect().width;
    let newHeight = this.node.getBoundingClientRect().height;
    
    this.node.style.width = this.lockedWidth + `px`;
    this.node.style.height = this.lockedHeight + `px`;
    
    await this.pRequestAnimationFrame();
    this.node.style.transition = `height ${duration}ms, width ${duration}ms`;
    this.node.style.height = newHeight + `px`;
    this.node.style.width = newWidth + `px`;
    
    await this.waitTransitionFinish();
    this.node.style.transition = null;
    this.node.style.height = this.oldHeight;
    this.node.style.width = this.oldWidth;
  }
}
 
class AutoBoundsWrapper {
  constructor(node, duration=500) {
    this.autoBoundsTransition = AutoBoundsTransition.for(node);
    this.duration = duration;
  }
  
  async resize(resizer) {
    this.autoBoundsTransition.lockBounds();
    resizer();
    await this.autoBoundsTransition.fitContent(this.duration);
  }
}

Демо: https://jsfiddle.net/bnhqcyz2/16/

ES5-совестимый код (Babel)

Внимание! Требуются полифиллы: https://babeljs.io/docs/usage/polyfill
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
"use strict";
 
function _asyncToGenerator(fn) {
  return function() {
    var gen = fn.apply(this, arguments);
    return new Promise(function(resolve, reject) {
      function step(key, arg) {
        try {
          var info = gen[key](arg);
          var value = info.value;
        } catch (error) {
          reject(error);
          return;
        }
        if (info.done) {
          resolve(value);
        } else {
          return Promise.resolve(value).then(
            function(value) {
              step("next", value);
            },
            function(err) {
              step("throw", err);
            }
          );
        }
      }
      return step("next");
    });
  };
}
 
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
 
var AutoBoundsTransition = (function() {
  AutoBoundsTransition.for = function _for(node) {
    if (!this._context) this._context = new WeakMap();
    if (!this._context.has(node)) this._context.set(node, new this(node));
 
    return this._context.get(node);
  };
 
  AutoBoundsTransition.prototype.pRequestAnimationFrame = function pRequestAnimationFrame() {
    return new Promise(function(resolve) {
      return requestAnimationFrame(resolve);
    });
  };
 
  function AutoBoundsTransition(node) {
    _classCallCheck(this, AutoBoundsTransition);
 
    this.node = node;
  }
 
  AutoBoundsTransition.prototype.lockBounds = function lockBounds() {
    this.lockedWidth = this.node.getBoundingClientRect().width;
    this.lockedHeight = this.node.getBoundingClientRect().height;
 
    this.oldHeight = this.node.style.height;
    this.oldWidth = this.node.style.width;
 
    this.node.style.width = this.lockedWidth + "px";
    this.node.style.height = this.lockedHeight + "px";
  };
 
  AutoBoundsTransition.prototype.waitTransitionFinish = function waitTransitionFinish() {
    var resolve = null;
    var promise = new Promise(function(res) {
      return (resolve = res);
    });
 
    this.node.addEventListener(
      "transitionend",
      function listener(event) {
        event.target.removeEventListener("transitionend", listener, true);
        resolve();
      },
      true
    );
    return promise;
  };
 
  AutoBoundsTransition.prototype.fitContent = (function() {
    var _ref = _asyncToGenerator(
      /*#__PURE__*/ regeneratorRuntime.mark(function _callee(duration) {
        var oldTransition, newWidth, newHeight;
        return regeneratorRuntime.wrap(
          function _callee$(_context) {
            while (1) {
              switch ((_context.prev = _context.next)) {
                case 0:
                  oldTransition = this.node.style.transition;
 
                  this.node.style.height = this.oldHeight;
                  this.node.style.width = this.oldWidth;
 
                  _context.next = 5;
                  return this.pRequestAnimationFrame();
 
                case 5:
                  newWidth = this.node.getBoundingClientRect().width;
                  newHeight = this.node.getBoundingClientRect().height;
 
                  this.node.style.width = this.lockedWidth + "px";
                  this.node.style.height = this.lockedHeight + "px";
 
                  _context.next = 11;
                  return this.pRequestAnimationFrame();
 
                case 11:
                  this.node.style.transition =
                    "height " + duration + "ms, width " + duration + "ms";
                  this.node.style.height = newHeight + "px";
                  this.node.style.width = newWidth + "px";
 
                  _context.next = 16;
                  return this.waitTransitionFinish();
 
                case 16:
                  this.node.style.transition = null;
                  this.node.style.height = this.oldHeight;
                  this.node.style.width = this.oldWidth;
 
                case 19:
                case "end":
                  return _context.stop();
              }
            }
          },
          _callee,
          this
        );
      })
    );
 
    function fitContent(_x) {
      return _ref.apply(this, arguments);
    }
 
    return fitContent;
  })();
 
  return AutoBoundsTransition;
})();
 
var AutoBoundsWrapper = (function() {
  function AutoBoundsWrapper(node) {
    var duration =
      arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;
 
    _classCallCheck(this, AutoBoundsWrapper);
 
    this.autoBoundsTransition = AutoBoundsTransition.for(node);
    this.duration = duration;
  }
 
  AutoBoundsWrapper.prototype.resize = (function() {
    var _ref2 = _asyncToGenerator(
      /*#__PURE__*/ regeneratorRuntime.mark(function _callee2(resizer) {
        return regeneratorRuntime.wrap(
          function _callee2$(_context2) {
            while (1) {
              switch ((_context2.prev = _context2.next)) {
                case 0:
                  this.autoBoundsTransition.lockBounds();
                  resizer();
                  _context2.next = 4;
                  return this.autoBoundsTransition.fitContent(this.duration);
 
                case 4:
                case "end":
                  return _context2.stop();
              }
            }
          },
          _callee2,
          this
        );
      })
    );
 
    function resize(_x3) {
      return _ref2.apply(this, arguments);
    }
 
    return resize;
  })();
 
  return AutoBoundsWrapper;
})();
0
19.03.2018, 21:14
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.03.2018, 21:14
Привет! Вот еще темы с ответами:

Обмен готовыми решениями - PHP
&lt;?PHP echo getfilesize($_GET); // Функция для определения размера function getfilesize($filename) { // Проверяем,...

Обсуждение класса постраничной навигации из темы "Обмен готовыми решениями" - PHP
Выделено из темы: http://www.cyberforum.ru/php/thread158262-page2.html Para bellum, может стоит добавить методу get еще один не...

Связь с готовыми mdb и accdb через форму - C#
Добрый вечер! Нужна программная реализация подключения к бд, вывод данных из таблицы на форму через datagridview и сохранение новых...

.NET 4.x Может кто дать сайт с бесплатными готовыми курсовыми - C#
может кто дать сайт с бесплатными готовыми курсовыми? ну или скинуть готовую, может завалялась где


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
63
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru