|
| |
|
|
| |
для: Trianon
(05.02.2010 в 14:33)
| | | Ага... Спасибо! | |
| |
|
|
| |
|
|
| |
для: АЯ
(05.02.2010 в 03:55)
| | | >Если заменить выделенное жирно на Tim = setTimeout (Motion, Int);, то работать будет во всех браузерах, кроме FF. В FF почему-то функция Motion, вызванная по названию (без кавычек и круглых скобок), получает какой-то аргумент.
http://javascript.ru/blog/subzey/Firefox-setTimeout
В Firefox, в setTimeout первым аргументом передаётся "просроченное время", "задержка" (если таковые возникнут) в ходе интерпретации кода. Т.е., если setTimeout не успевает запуститься после назначенного времени (например, через 100мс), эта "просроченная задержка" фиксируется первым параметром.
(с) | |
| |
|
|
| |
|
|
| |
для: АЯ
(05.02.2010 в 03:55)
| | | Да, вариант не плохой, но что будет если несколько раз нажать на кнопку, или будет много разных элементов на странице которых нужно заанимировать?:)
У меня в ие не работает потому что не могу передать в setTimeout объект с нужными переменными.. пока лень разбираться:)
я вообще думаю сюда забабахать несколько анимаций с возможностью их скрещивания одновременно:)
было бы прикольно вроде:) | |
| |
|
|
| |
|
|
| |
для: sl1p
(05.02.2010 в 01:19)
| | | Круто!
Разбираться с вашим кодом не стал, сделал тоже самое по-своему (в кроссбраузерном варианте):
<html>
<head>
<title>Text Motion</title>
<script>
function Motion ()
{
if (Motion.arguments.length)
{
//alert (Motion.arguments [0])
if (self.Cln) document.body.removeChild (Cln); Tim = null;
var s = Motion.arguments [0], obj = document.getElementById (s); Tp = Lt = 0;
while (obj.offsetParent) {Tp += obj.offsetTop; Lt += obj.offsetLeft; obj = obj.offsetParent}
Spn = document.getElementById (s); Cln = Spn.cloneNode (1); with (Cln.style)
{zIndex = 99; position = 'absolute'; left = Lt; top = Tp; fontSize = '100%'}
Cln = document.body.appendChild (Cln); Spn.style.visibility = 'hidden';
Ofh = Spn.offsetHeight; Ofw = Spn.offsetWidth; Cur = Sts = 20; Siz = 15; Int = 5;
}
if (Cur != -1 * Sts)
{
Cln.style.fontSize = (100 + Siz * (Sts + --Cur * ((Cur < 0) ? 1 : -1))) + '%';
with (Cln.style) {top = Tp - (Cln.offsetHeight - Ofh) / 2; left = Lt - (Cln.offsetWidth - Ofw) / 2}
Tim = setTimeout ('Motion ()', Int);
}
else Spn.style.visibility = 'visible';
}
</script>
</head>
<body style="margin: 100px 200px">
<span id="boom_me">Text Motion</span><br>
<input style="margin-top: 100px" type="button" onclick="Motion ('boom_me')" value="boom it">
</body>
</html>
|
В процессе обнаружил интересную особенность у браузера FF.
Если заменить выделенное жирно на Tim = setTimeout (Motion, Int);, то работать будет во всех браузерах, кроме FF. В FF почему-то функция Motion, вызванная по названию (без кавычек и круглых скобок), получает какой-то аргумент. Причём каждый раз этот аргумент - разный. Если раскомментировать alert, то можно будет это увидеть. Что это за аргумент - пока не разобрался. | |
| |
|
|
| |
|
|
| | :) игрался, и тут вроде пришла идея написать рызные анимации текста.
Пока сухо, конечно.. (+не работает в ИЕ)
но что-то вроде такого :)
потестите кому не лень. Стоит ли продолжать?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Text Motion</title>
<script type="text/javascript">
function ge(id) {
return document.getElementById(id);
}
function ce(tagName) {
return document.createElement(tagName);
}
var tmot = {
// default settings
steps : 20, // кол-во "кадров"
stepSize : 15, // изменение размера шрифта за кадр, в процентах
stepInterval : 5, // периодичность кадров
normalize : true, // если true, текст будет возвращен в исходное положение (т.е. кол-во кадров * 2)
//
go: function(el, options) {
var cn = el.cloneNode(1);
var layer = ce("DIV");
layer.style.position = 'absolute';
layer.appendChild(cn);
document.body.appendChild(layer);
if(!options) options = [];
this.m({
layer : layer,
parent : el,
step : 0,
cfg : {
steps : options.steps? options.steps : this.steps,
stepSize : options.stepSize? options.stepSize : this.stepSize,
stepInterval : options.stepInterval? options.stepInterval : this.stepSize,
normalize : options.normalize? options.normalize : this.normalize
}
}, options);
},
m: function(p, options) {
if(p.cfg.normalize && p.step >= p.cfg.steps) p._goBack = 1;
p.step = p._goBack? p.step-1 : p.step+1;
if(p.step <= p.cfg.steps && (!p._goBack || (p._goBack && p.step >= 0))) {
fSize = p.layer.style.fontSize.replace('%', '')*1;
fSize = fSize < 100? 100 : fSize;
fSize = p._goBack? fSize-p.cfg.stepSize : fSize+p.cfg.stepSize;
p.layer.style.fontSize = fSize + '%';
var x, y;
y = p.parent.offsetTop - parseInt((p.layer.offsetHeight - p.parent.offsetHeight)/2);
x = p.parent.offsetLeft - parseInt((p.layer.offsetWidth - p.parent.offsetWidth)/2);
p.layer.style.top = y + 'px';
p.layer.style.left = x + 'px';
setTimeout(tmot.m, p.cfg.stepInterval, p, options);
} else {
p.layer.parentNode.removeChild(p.layer);
}
}
}
</script>
</head>
<body>
<div style="padding:400px">
<span id="boom_me">Text Motion</span>
</div>
<center><input type="button" onclick="tmot.go(ge('boom_me'))" value="boom it"></center>
</body>
</html>
|
| |
| |
|
|
|
