VPF::Увеличение\Приближение изображения

SiNaC0m

Дата 15.3.2007, 10:25 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 20.9.2006
Где: Tyumen

Репутация: нет
Всего: нет

Начал пробывать реализовать с помощью JS.
Для начало сделал следующее:
анимационное прокручивания большой картинки, тоесть все изображение не выводится на экран, а выводится лишь его часть.. и по нажатию на одну из четырех кнопок(вверх,вниз,влево,вправо) изображение смещается соответственно нажатой кнопке..

Код


<script type="text/javascript">
var Timer;

function ScrollLeft()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft -= 2", 30);
}
function ScrollRight()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft += 2", 30);
}
function ScrollUp()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop += 2", 30);
}
function ScrollDown()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop -= 2", 30);
}
</script>

<div id="PANORAMA" style="width:800px; height:600px; border: 1px solid;
overflow:hidden">
<img src="2.gif" style="width:1000px"/>
</div>

<div style="width:1000px; text-align:center">
<input type="button" value="<" title="Scroll left" style="width:25px"
onmousedown="ScrollLeft()"
onmouseup="clearInterval(Timer)">
<input type="button" value=">" title="Scroll right" style="width:25px"
onmousedown="ScrollRight()"
onmouseup="clearInterval(Timer)">
<input type="button" value="~" title="Scroll down" style="width:25px"
onmousedown="ScrollUp()"
onmouseup="clearInterval(Timer)">
<input type="button" value="^" title="Scroll up" style="width:25px"
onmousedown="ScrollDown()"
onmouseup="clearInterval(Timer)">
</div>

Теперь мне нужно сделать следующее:
Создать ещё две кнопки "+" и "-", при нажатии на которые, та часть изображения, которая в данный момент на экране, соотвественно увеличивалась и уменьшалась.

Подскажите, какие свойства нужно использовать....

З.Ы. Извиняюсь за опечатки и корявость мысли!

SiNaC0m

Дата 15.3.2007, 13:03 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 20.9.2006
Где: Tyumen

Репутация: нет
Всего: нет

Понял, что мне нужно написать две функции, которые меняют кол-во выводимых пикселей в этой строчке

Код

<img src="2.gif" style="width:1000px"/>

что то типа .....width:1000+\-=2

Только вот как это реализовать???? Знающие люди помогите плиз....

12345c

Дата 15.3.2007, 14:13 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Красивее это делать не в окне, а в слое, тогда не надо фрейм делать. И реализовывать размещением абсолютнопозиц. картинки в диве с overflow:hidden. Далее чисто математика (арифметика) - где поставить угол картинки, чтобы показать часть. Свойства - .style.top, style.left, style.width (последнее для масштабирования). В конце после числа обязательно 'px'.

SiNaC0m

Дата 15.3.2007, 14:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 20.9.2006
Где: Tyumen

Репутация: нет
Всего: нет

В том то и дело, что мне это надо сделать именно в окне smile

А как мне "обратиться" к элементу, если он представлен как сылка на изображение?

Код


Timer = setInterval("document.getElementById('PANORAMA').scrollLeft -= 2", 30);

ID ведь уже не прокатит????

butionok

Дата 15.3.2007, 14:33 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: 1
Всего: 3

Измени

Код


<img id="picture" src="2.gif" style="width:1000px"/>

далее для уменьшения:

Код


document.getElementById("picture").style.width=parseInt(document.getElementById("picture").style.width)/n+"px"; //для уменьшение в n раз
document.getElementById("picture").style.width=parseInt(document.getElementById("picture").style.width)-n+"px"; //для уменьшение на n пикселей

для увеличения сообрази сам smile

--------------------

Ненавижу убогую Оперу.

SiNaC0m

Дата 15.3.2007, 15:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 20.9.2006
Где: Tyumen

Репутация: нет
Всего: нет

Подскажите, где я туплю!!!!

Код


......................
......................
function resize()
{
Timer = setInterval("document.getElementById("picture").style.width=parseInt(document.getElementById("picture").style.width)-100+"px"", 30);
}
</script>
<div id="PANORAMA" style="width:700px; height:550px; border: 1px solid;
overflow:hidden">
<img id="picture" src="2.gif" style="width:700px"/>
</div>
<div style="width:700px; text-align:center">
......................................................................
<input type="button" value="-" title="re size" style="width:25px"
onmousedown="resize()"
onmouseup="clearInterval(Timer)">
</div>

Mymik

Дата 15.3.2007, 15:43 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 11
Всего: 78

Цитата(SiNaC0m @ 15.3.2007, 15:12

)

Timer = setInterval("document.getElementById("picture").style.width=parseInt(document.getElementById("picture").style.width)-100+"px"", 30);

Код


Timer = setInterval("document.getElementById('picture').style.width=parseInt(document.getElementById('picture').style.width)-100+'px'", 30);

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

SiNaC0m

Дата 15.3.2007, 16:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 20.9.2006
Где: Tyumen

Репутация: нет
Всего: нет

Огромное спасибо! Все работает! smile

SiNaC0m

Дата 16.3.2007, 15:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 20.9.2006
Где: Tyumen

Репутация: нет
Всего: нет

Появился еще один небольшой вопрос: можно ли на изображения поместить некоторое количество объектов(независящих друг от друга, например квадрат и треугольник, тыкаю на квадрат открывается одно меню, на треугольник - другое)?
Где про это можно почитать?

butionok

Дата 16.3.2007, 19:12 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: 1
Всего: 3

Можно.
например так:

Код


<div id='d1' style='position:absolute'><img id='p1' src='1.jpg' style='position:absolute;left:0px;top:0px'></div>
<div id='d2' style='position:absolute'><img id='p2' src='2.jpg' style='position:absolute;left:100px;top:100px'></div>

--------------------

Ненавижу убогую Оперу.

SiNaC0m

Дата 9.4.2007, 11:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 20.9.2006
Где: Tyumen

Репутация: нет
Всего: нет

butionok
Столкнулся со следующей проблемой: при использовании твоего кода на изображении с масштабированием(приближение\удаление), вставляемые объекты не меняют своего местоположение динамически как это исправить?

butionok

Дата 9.4.2007, 18:54 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: 1
Всего: 3

SiNaC0m,

Было бы лучше если б ты показал часть хтмл кода. Вопрос немного не понятен. Я так понимаю ты попытался наложить на изображение другие (квадрат, треугольник.. ) так? И они при увеличении/уменьшении находятся на том же месте относительно слоя "PANORAMA"? Собственно, если б я делал то, что ты делаешь, я бы был бы доволен результатом smile

. Или я не понимаю в чём состоит твоя проблема.

--------------------

Ненавижу убогую Оперу.

SiNaC0m

Дата 9.4.2007, 19:30 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 20.9.2006
Где: Tyumen

Репутация: нет
Всего: нет

butionok
У меня есть изображение, на него я накладываю "квадрат, треугольник и так далее". Проблема в том, что при увеличении - уменьшении этого изображения "квадрат, треугольник и так далее" остаются на том же месте, а не смещаются

Код


<script type="text/javascript">
var Timer;

function ScrollLeft()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft -= 2", 10);
}
function ScrollRight()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft += 2", 10);
}
function ScrollUp()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop += 2", 10);
}
function ScrollDown()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollTop -= 2", 10);
}
function Resize()
{
Timer = setInterval("document.getElementById('picture').style.width=parseInt(document.getElementById('picture').style.width)-10+'px'", 30);
}
function Resizee()
{
Timer = setInterval("document.getElementById('picture').style.width=parseInt(document.getElementById('picture').style.width)+10+'px'", 30);
}
</script>
<div id='d1' style='position:absolute'><img id='p1' src='1.jpg' style='position:absolute;left:0px;top:0px'></div>
<div id='d2' style='position:absolute'><img id='p2' src='2.jpg' style='position:absolute;left:100px;top:100px'></div>
<div id="PANORAMA" style="width:700px; height:550px; border: 1px solid;
overflow:hidden">
<img id="picture" src="2.gif" style="width:700px"/>
</div>

<div style="width:700px; text-align:center">
<input type="button" value="<" title="Scroll left" style="width:25px"
onmousedown="ScrollLeft()"
onmouseup="clearInterval(Timer)">
<input type="button" value=">" title="Scroll right" style="width:25px"
onmousedown="ScrollRight()"
onmouseup="clearInterval(Timer)">
<input type="button" value="\/" title="Scroll down" style="width:25px"
onmousedown="ScrollUp()"
onmouseup="clearInterval(Timer)">
<input type="button" value="/\" title="Scroll up" style="width:25px"
onmousedown="ScrollDown()"
onmouseup="clearInterval(Timer)">
<input type="button" value="-" title="-" style="width:25px"
onmousedown="Resize()"
onmouseup="clearInterval(Timer)">
<input type="button" value="+" title="+" style="width:25px"
onmousedown="Resizee()"
onmouseup="clearInterval(Timer)">
</div>

<script language="JavaScript">

function clock_form()

         {

     day=new Date()

     clock_f=day.getHours()+":"+day.getMinutes()+":"+day.getSeconds()

     document.form.f_clock.value=clock_f

         id=setTimeout("clock_form()",100)

     }

</script>

<body bgcolor="ffffff" onLoad="clock_form()">

<form name=form metod="get">

<input name=f_clock maxlength=8 size=8>
</form>

butionok

Дата 9.4.2007, 19:56 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 125
Регистрация: 19.1.2005

Репутация: 1
Всего: 3

Всё, дошло.

Код


<div id="PANORAMA" style="width:700px; height:550px; border: 1px solid;overflow:hidden">
<img id='p1' src='1.jpg' style='position:absolute;left:0px;top:0px'>
<img id='p2' src='2.jpg' style='position:absolute;left:100px;top:100px'>
<img id="picture" src="2.gif" style="width:700px"/>
</div>

Просто я не ожидал что, ты так буквально будешь следовать примеру.
Собственно слои d1 и d2 не нужны. Просто клади все картинки в один слой. "квадрат, треугольник и так далее" должны быть абсолютно позиционированны. Их положения будут расчитываться от "PANORAMA"

--------------------

Ненавижу убогую Оперу.

SiNaC0m

Дата 17.4.2007, 10:58 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 12
Регистрация: 20.9.2006
Где: Tyumen

Репутация: нет
Всего: нет

butionok
Ты не совсем правильно меня понял, а точнее, я не совсем правильно выразился.
У меня есть картинка в окне, на которую сверху наносится изображение. Картинку, та, что в окне, можно увеличивать и уменьшать.
Надо сделать так, что бы, при увеличении\уменьшении этой картинки, нанесенное на неё изображение не меняло свое место. Тоесть было прикрепленно к этому изображению. Как "привязать" картинку непосредственно к пикселям изображения.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »