Пример правильной анимации элемента:
<style type="text/css">
div {background:#eeeeee; border:1px black solid; width:50px; height:50px; position:absolute; top:50px;}
</style>
<script type="text/javascript">
function delta(progress) {
return progress;
}
function animate(element){
var from = 0; // Начальная координата X
var to = 500; // Конечная координата X
var duration = 1000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта
setTimeout(function() {
var now = (new Date().getTime()) - start; // Текущее время
var progress = now / duration; // Прогресс анимации
var result = (to - from) * delta(progress) + from;
element.style.left = result + "px";
if (progress < 1) // Если анимация не закончилась, продолжаем
setTimeout(arguments.callee, 10);
}, 10);
}
</script>
<div id="example" style="left:0px;" onclick="animate(this)">кликни на меня</div>
Подробнее читай в
статье "Основы программной анимации на JavaScript".
А по выделению:
Из той статьи пример:
<div onmouseup="alert($selection.getText())" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
Соберем микс из <b>жирности</b>, <em>курсива</em> и <a href="#">ссылки</a> и повыделяем здесь.
</div>
<script type="text/javascript">//<![CDATA[
$selection = {
getText : function() {
var txt = '';
if (txt = window.getSelection) {
txt = window.getSelection().toString();
} else {
txt = document.selection.createRange().text;
// document.selection.empty();
}
return txt;
}
}
//]]>
</script>
