eko24,
переменная light работает на все светофоры поэтому получается ерунда у каждого должен быть свой хранитель. |
eko24,
:-?
$.fn.plugin = function (b) {
b.push(b[1]); //добавляем жёлтый в конец чтоб цепочка была непрерывной З Ж К Ж
return this.each(function (f, d) {// перебираем все элементы
var a = 0, // тотже light хранит номер цвета на текущий момент
e = ["#008000", "#FFFF00", "#FF0000", "#FFFF00"],//цвета З Ж К Ж
c = function () {
$(d)
.css({
"background-color": e[a] //установка фона
});
window.setTimeout(c, 1000 * b[a]); //через сколько секунд сменить цвет
a = ++a % 4 //установка номера следующего цвета бесконечная серия 1...2...3...0...1...2...3...0...
};
c()// первый запуск
})
};
|
Спасибо )
А я вот все ломаю голову как сделать так, что бы можно было начинать работу с определённого цвета. Можете с этим помочь ? |
Цитата:
|
Да, но тогда все светофоры будут начинаться с красного.
Я просто не совсем понимаю принцип работы jQuery плагина, и мне нужно что бы этот параметр можно было передать при подключении плагина к определенному элементу, например:
$(".box").plugin([8,2,8],true);
где true отвечает за переменную begin_with_green, которая при значении true начинает работу с зеленого цвета, а при false начинает с красного . Как то так ;) P.S. И еще хочу спросить как взаимойдействовать с информацией(переменными), которая находиться в плагине jQuery. Если я хочу достучаться до переменной у которой значение "2" вот отсюда?
$(".box").plugin([8,2,8]);
то как мне это сделать ? А то уже перерыл кучу топиков по созданию jQuery плагинов, но что-то ни в одном из них не видел как объясняют про взаимодействие с переменными из плагинов. Очень жду вашего ответа. |
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{ height : 50px ; width : 50px; margin : 1px; background-color : black; border-radius : 25px; border: solid 1px #000;text-align: center;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.fn.plugin = function (b, k) {
b.push(b[1]);
return this.each(function (f, d) {
var a = k ||0,
e = ["#008000", "#FFFF00", "#FF0000", "#FFFF00"],
c = function () {
$(d)
.css({
"background-color": e[a]
});
window.setTimeout(c, 1E3 * b[a]);
a = ++a % 4
};
c()
})
};
</script>
<script type="text/javascript">
$(window).load(function(){
$(".box").plugin([8,2,8],2);//начать с красного
$(".too").plugin([2,2,2],1);//с жёлтого
});
</script>
<title></title>
</head>
<body>
<div class="box">is box</div>[8,2,8],2
<div class="too">is too</div>[2,2,2],1
</body>
</html>
|
Мой маленький светофор. Учусь я :)
<!DOCTYPE html>
<html>
<head>
<title>Светофор</title>
<style>
.table33 {
width: 33%;
float: left;
}
.signal {
background-color: #000;
padding: 5px;
float: left;
}
.signal li {
list-style: none;
height: 50px;
width: 50px;
border-radius: 50%;
margin: 4px;
opacity: 0.2;
}
.signal .active {
opacity: 1;
}
.signal .red {
background-color: red;
}
.signal .yellow {
background-color: yellow;
}
.signal .green {
background-color: green;
}
</style>
</head>
<body>
<div class="table33">
<ul id="signal1" class="signal">
<li class="red"></li>
<li class="yellow"></li>
<li class="green"></li>
</ul>
</div>
<div class="table33">
<ul id="signal2" class="signal">
<li class="red"></li>
<li class="yellow"></li>
<li class="green"></li>
</ul>
</div>
<div class="table33">
<ul id="signal3" class="signal">
<li class="red"></li>
<li class="yellow"></li>
<li class="green"></li>
</ul>
</div>
<script>
window.onload = function () {
var signal = function (id, position, interval, reverse) {
position = position || 0;
interval = interval || 1000;
this.start = function(){
var li = document.getElementById(id).getElementsByTagName('li');
li[position].className += ' active';
reverse = reverse || false;
this._timer = setInterval(function (){
for(i = 0; ; i++){
var class_name = li[i].className.split(' ');
if(class_name[1] == 'active'){
li[i].className = class_name[0];
if(i == 2){
i=0;
reverse = true;
} else if(i == 1 && reverse){
i = -1;
reverse = false;
}
li[++i % 3].className += ' '+class_name[1];
break;
}
}
}, interval);
return this;
};
this.stop = function() {
clearInterval(this._timer);
return this;
};
};
var signal1 = new signal('signal1').start();
var signal2 = new signal('signal2', 1).start();
var signal3 = new signal('signal3', 2, 10000).start();
}
</script>
</body>
</html>
|
Неплохо.
Если хотите усложнить себе задачку - реализируйте следующую визуализацию светофора: зелёный>зелёный мигающий>жёлтый>красный>кр сный+жёлтый. Потому что настоящий светофор работает именно так. |
<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Светофор. Автор - Федор Власенко</title>
<style>
.signal {
background-color: #000;
padding: 5px;
float: left;
}
.signal div {
list-style: none;
height: 40px;
width: 40px;
border-radius: 50%;
margin: 4px;
opacity: 0.2;
}
.signal .active {
opacity: 1;
}
</style>
</head>
<body>
<div id="signal1" class="signal">
<div></div>
<div></div>
<div></div>
</div>
<script type='text/javascript'>
window.onload = function () {
var traficLight = function (id, path) {
var pathLength = path.length, point = 0;
var signals = [], i, color, animTimer, element;
var alls = document.getElementById(id).getElementsByTagName('div');
for (i = 0; ; i += 1) {
color = ['red', 'yellow', 'green'][i % 3];
alls[i].style.background = color;
signals[color] = alls[i];
if (i == 2) break;
}
var start = function () {
point = (point > pathLength - 1) ? 0 : point;
element = path[point];
if (element.interval == 0) {
blink(element);
} else if (element.dual != '') {
signals[element.color].className = signals[element.dual].className = 'active';
show(element);
} else {
signals[element.color].className = 'active';
show(element);
}
point += 1;
};
var blink = function (element) {
i = 0;
animTimer = setInterval(function () {
signals[element.color].className = (signals[element.color].className == '') ? 'active' : '';
if (++i == 6) {
clearTimeout(animTimer);
start();
}
}, 500);
};
var show = function (element) {
animTimer = setInterval(function () {
clearTimeout(animTimer);
signals[element.color].className = '';
if (element.dual) signals[element.dual].className = '';
start();
}, element.interval);
};
start();
};
var signal = function (color, interval, dual) {
this.color = color;
this.interval = interval || 0;
this.dual = dual || '';
};
var red = new signal('red', 5000);
var redYellow = new signal('red', 2000, 'yellow');
var yellow = new signal('yellow', 3000);
var green = new signal('green', 5000);
var greenBlink = new signal('green');
var traficLight1 = new traficLight('signal1', [green, greenBlink, yellow, red, redYellow]);
};
</script>
</body>
</html>
Попробовал, может кто подскажет лучше реализацию. Здесь основано на задании параметров каждой точки (point) алгоритма |
| Часовой пояс GMT +3, время: 03:37. |