Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Выделение текста, передвижение элемента (https://javascript.ru/forum/misc/14133-vydelenie-teksta-peredvizhenie-ehlementa.html)

(Sandr) 31.12.2010 21:09

Выделение текста, передвижение элемента
 
Заметил на этом сайте одну интересную вещь. Если я хочу процитировать какое либо сообщение пользователя, то мне достаточно его просто выделить, нажать на опредилённую ссылку и оно сразу появляется в поле ввода для отправки сообщения. Как сделать подобную штуку?)
И ещё один вопрос, покажите пжл как плавно передвинуть элемент из одной стороны в другую, например, на 50px? Я слышал о методе animate, но не разобрался как им воспользоваться..

monolithed 31.12.2010 23:37

http://2007.fastcoder.ru/articles/?aid=609

(Sandr) 05.01.2011 20:20

Цитата:

Сообщение от monolithed (Сообщение 85921)

Чувак, там всё заумно)) Не мог бы ты дать пример простенький?

monolithed 06.01.2011 00:50

(Sandr) куда еще проще?

Vulkan 06.01.2011 09:38

Пример правильной анимации элемента:
<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>

(Sandr) 06.01.2011 12:47

всем спсб)


Часовой пояс GMT +3, время: 08:51.