Да я понимаю, что это очень тяжело для браузера. Времени очень не хватает сейчас заняться этой задачкой.
|
У меня глупый вопрос, а зачем плодить кучу элементов <span>.
Может стоит тягать по букве с помощью функции slice(startPos,endPos), а для анимации использовать один элемент (ну если строго по букве перемещать) в который перемещаемая буква будет закидываться?? Ну или для унификации функции сделать обертывание буквы элементом "на лету" ... |
Можно и так.
|
Aж понравилось )
<html>
<head>
</head>
<body>
<div id="t" style="position: absolute">простидижетатор</div>
<script>
var obj = document.getElementById("t");
var x = 0;
var span = {};
var animation_on = false;
function move() {
x=x+1;
s=x+"px";
span.style.left=s;
}
var letters_move = function() {
// console.log(' x = '+x);
var o = obj.innerHTML;
if(animation_on)
{
if(x<100) {
move();
}else{
span.style.display='none';
animation_on = false;
x=0;
if(o.length<1) { return false; }
}
}else{
span = document.createElement('SPAN');
span.appendChild(document.createTextNode(o.slice(0,1)));
span.style.top = obj.offsetTop;
span.style.left = obj.offsetLeft;
span.style.position = "absolute";
document.getElementsByTagName('body')[0].appendChild(span);
obj.innerHTML = o.slice(1,o.length-1);
animation_on = true;
// console.log(' - animation_on: '+animation_on );
move();
}
setTimeout("letters_move()",7);
}
setTimeout("letters_move()",7);
</script>
</body>
</html>
|
Keeper, сделайте запускаемым, штоле...
|
проверил в FF и Chrome, IE 9, Safari, Opera 11.60
|
Цитата:
|
|
Цитата:
Цитата:
<html>
<head>
</head>
<body>
<div id="t" style="position: absolute">простидижетатор</div>
<script>
var obj = document.getElementById("t");
var x = 0;
var span = {};
var animation_on = false;
function move()
{
x=x+1;
s=x+"px";
span.style.left=s;
}
var letters_move = function()
{
// console.log(' x = '+x);
var o = obj.innerHTML;
if(animation_on)
{
if(x<100) { move();}
else
{
span.style.display='none';
animation_on = false;
x=0;
if(o.length<1) { return false;}
}
}
else
{
span = document.createElement('SPAN');
span.appendChild(document.createTextNode(o.slice(0,1)));
span.style.top = obj.offsetTop;
span.style.left = obj.offsetLeft;
span.style.position = "absolute";
document.getElementsByTagName('body')[0].appendChild(span);
obj.innerHTML = o.slice(1,o.length-1);
animation_on = true;
// console.log(' - animation_on: '+animation_on );
move();
}
setTimeout("letters_move()",7);
}
setTimeout("letters_move()",7);
</script>
</body>
</html>
|
Дак помог нет ? )
|
| Часовой пояс GMT +3, время: 07:36. |