Кормораздатчик мобильный электрифицированный: схема и процесс работы устройства...
Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...
Топ:
Определение места расположения распределительного центра: Фирма реализует продукцию на рынках сбыта и имеет постоянных поставщиков в разных регионах. Увеличение объема продаж...
Марксистская теория происхождения государства: По мнению Маркса и Энгельса, в основе развития общества, происходящих в нем изменений лежит...
Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного хозяйства...
Интересное:
Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...
Инженерная защита территорий, зданий и сооружений от опасных геологических процессов: Изучение оползневых явлений, оценка устойчивости склонов и проектирование противооползневых сооружений — актуальнейшие задачи, стоящие перед отечественными...
Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...
Дисциплины:
 2017-09-30 |
 427 |
из
5.00
|
Заказать работу |
|
|
|
|
Перемещать мышью изображения можно различными способами. Изучим один из них: пользователь пытается перетащить мышью изображение; затем он должен отпустить кнопку мыши и переместить указатель в нужное место; остановившись в нужном месте, пользователь отпускает кнопку мыши или щелкает ею, чтобы прекратить перемещение изображения. Код перемещения изображения мышью:
<НТМL>
<НЕАD><TITLE>Перемещаемое изображение</TITLE></НЕАD>
<BODY id = "mybody">
<IMG ID="myimg" SRC = "pict.gif ondragstart = "drag()" style = "position:absolute; top:10; left:10">
</BODY>
<SCRIPT>
flag = false // нельзя перемещать
var id_img = ""
function drag() {
flag = mag
id_img = event.srcElement.id
}
function mybody.onmousemove(){
if (flag){ // если можно перемещать
document.all[id_img].style.top = event.clientY
document.all[id_img].style.left = event.clientX } }
function mybody.onmouseup(){
flag = false // нельзя перемещать
}
</SCRIPT>
</HTML>
Здесь функция drag(), обрабатывающая событие ondragstart (попытка перетаскивания), устанавливает переменную-триггер flag и выясняет, кто инициатор события. Значение переменной flag позволяет определить, можно или нельзя перемещать элемент. В данном примере инициатором события может быть только один элемент. События onmousemove (перемещение указателя мыши) и onmouseup (кнопка мыши отпущена) получает не изображение, а объект тела документа mybody.
Перемещение текстовых областей
Рассмотрим пример HTML-документа, в котором можно перемещать текстовые области, созданные с помощью тегов <TEXTAREA>. Размеры области и шрифта текста определяются в ней в зависимости от значения вертикальной координаты.
<HTML>
<НЕАD><ТITLE>Перемещаемые текстовые облас-ти</ТITLE></НЕАD>
<BODY id = "mybody" background = "blue.gif">
<TEXTAREA ID="tl" ondblclick=""drag()" STYLE = "position:absolute;
|
|
top:10; left: 10; fon-size: large"> Это – первый текст</TEXTAREA>
<TEXTAREA ID="t2" ondblclick=""drag()" STYLE = "position:absolute;
top:100; left:150"> Это – второй текст </TEXTAREA>
<TEXTAREA ID="t3" ondblclick=""drag()" STYLE = "position:absolute; top:150; left:250"> Это - третий текст </ТЕXTAREA>
</BODY>
<SCRIPT>
resizetext() { // установка размеров текстовых областей
var flag = false }
var id_img = ""
function drag() {
flag =!flag
id_img = event.srcElement.id //id элемента, который надо перемещать
function mybody.onmousemove() {
if (flag){
document.all[id_img].style.top = event.clientY
document.all[id_img].style.left = event.clientX
resizetext() }} // установка размеров текстовых областей
function mybody.onmouseup() {
flag = false }
function resizetext () { // установка размеров областей
var у, size, idimg, idtext
for (i =0; i < document.all.length; i++) {
if (document.all[i].tagName=='TEXTAREA') {
idtext = document.all[i].id
у = parseInt(document.all[idtext].style.top)
size = Math.min(y, 800)
size = Math.max(size, 60)
document.all[idtext].style.width = size
document.all[idtext].style.height = 0.8*size
document.all[idtext].style.zIndex = у
document.all[idtext].style.fontSize = Math.max(2, y/10)
</SCRIPT>
</HTML>
Схема сценария, осуществляющего непрерывное перемещение видимого элемента документа, имеет следующий вид:
Function init_move() { // инициализация движения
... // подготовка к запуску функции move()
setInterval("move()", задержка)
function move(){
.../* изменение координат top и left стиля перемещаемого элемента */
// вызов функции для перемещения элемента
Cоздаются две функции: init_move(), которая осуществляет подготовку исходных данных и вызывает метод setInterval() с указанием в качестве первого параметра имени второй функции move() в кавычках, и move(), которая изменяет координаты элемента. Поскольку метод setInterval() вызывает функцию move() периодически через заданное количество миллисекунд, то координаты элемента изменяются постоянно. При этом создается эффект движения. Скорость и плавность движения зависят от величин приращения координат (в функции move()) и временной задержки (второго параметра метода setInterval()). Чтобы начать перемещение элемента надо вызвать первую функцию init_move().
Остановка движения
Сценарий с запуском и остановкой движения может выглядеть, например, следующим образом:
|
|
function init_move(xid, dx, dy) {
var prmstr = "'"+xid+","+dx+","+dy // строка параметров для move()
prmstr = "move(" +prmstr+ ")"
idjnove = setInterval (prmstr, 200) /* сохраняем идентификатор движения */
}
function move(xid, dx, dy) {
у = parseInt(document.all[xid].style.top)
x = parseInt(document.all[xid].style.left)
document.all.myimg.style.top = у+dy
document.all.myimg.style.left = x+dx
if (parseInt(document.all[xid].style.left) > 350) /* остановка по условию */
}
clearInterval(id move)
init_move(“myimg”, 10, 5) // начинаем движение
В этом примере движение остановится, как только горизонтальная координата элемента превысит 350 пикселов.
|
|
|
Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначенные для поддерживания проводов на необходимой высоте над землей, водой...
Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...
Таксономические единицы (категории) растений: Каждая система классификации состоит из определённых соподчиненных друг другу...
Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!