Показать сообщение отдельно
  #3 (permalink)  
Старый 23.12.2015, 20:30
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Час убил, но написал.


.Ticker {
    background: #000;
    font-size: 15pt;
    height: 30px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}
.Ticker span {
    margin: 3px 0;
    position: absolute;
}



function Ticker(data) {
	data = data || {};

	this._enterFrameCallback = this._enterFrame.bind(this);

	this.self = document.createElement('div');
	this.self.classList.add('Ticker');
	this._textElement = document.createElement('span');
	this.self.appendChild(this._textElement);
    
	this.color = data.color || Ticker.DEFAULT_COLOR;
	this.speed = data.speed || Ticker.DEFAULT_SPEED;
	this.text = data.text || '?????';
};

Ticker.prototype = {
	insertTo: function(element) {
		element.appendChild(this.self);
	},
	play: function() {
		this.stop();
		this._state = 1;
		this._enterFrame();
	},
	stop: function() {
		this._state = 0;
	},
	_enterFrame: function() {
		if(this._state == 1) {
			this._left -= this.speed / 10;
			if(this._left < -this._textElement.clientWidth) {
				this._left = this.self.clientWidth;
			}
			this._textElement.style.left = this._left + 'px';
			requestAnimationFrame(this._enterFrameCallback);
		}
	},
	get color() {
		return this._color;
	},
	get speed() {
		return this._speed;
	},
	get text() {
		return this._text;
	},
	set color(value) {
		this._color = value;
		this.self.style.color = value;
	},
	set speed(value) {
		this._speed = value;
	},
	set text(value) {
		var textElement = this._textElement,
			textNode = document.createTextNode(value);
		this._left = this.self.clientWidth;
		this._text = value;
		if(textElement.firstChild) {
			textElement.removeChild(textElement.firstChild);
		}
		textElement.appendChild(textNode);
		this.play();
	}
};

Ticker.DEFAULT_COLOR = '#FF0000';
Ticker.DEFAULT_SPEED = 10;



Инициализация:
var myTicker = new Ticker();
myTicker.text = 'Hello World!';
myTicker.insertTo(document.body);



var myTicker = new Ticker({color: 'green', speed: 5, text: 'foo'});
myTicker.insertTo(document.body);



var myTicker = new Ticker();
myTicker.color = 'blue';
myTicker.speed = 8;
myTicker.text = 'Добрый день!';
myTicker.insertTo(document.body);




Живой пример: https://jsfiddle.net/8kttm17v/

Последний раз редактировалось ruslan_mart, 23.12.2015 в 20:33.
Ответить с цитированием