Antichat снова доступен.
Форум Antichat (Античат) возвращается и снова открыт для пользователей.
Здесь обсуждаются безопасность, программирование, технологии и многое другое.
Сообщество снова собирается вместе.
Новый адрес: forum.antichat.xyz
 |
|
JavaScript приближение\увеличение изображения |
15.03.2007, 15:15
|
|
Новичок
Регистрация: 27.02.2007
Сообщений: 8
Провел на форуме:
33084
Репутация:
0
|
|
JavaScript приближение\увеличение изображения
Начал пробывать реализовать это с помощью 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>
Теперь мне нужно сделать следующее:
Создать ещё две кнопки "+" и "-", при нажатии на которые, та часть изображения, которая в данный момент на экране, соотвественно увеличивалась и уменьшалась.
Подскажите, какие свойства нужно использовать....
нужно написать две функции, которые меняют кол-во выводимых пикселей в этой строчке
Код:
<img src="2.gif" style="width:1000px"/>
Знающие люди помогите плиз.... |
|
|
15.03.2007, 15:23
|
|
Постоянный
Регистрация: 23.03.2006
Сообщений: 977
Провел на форуме:
2976185
Репутация:
694
|
|
загружай их в 50% масштабе, а при нажатии на кнопку изменяй масштаб... но тогда физическое разрешение картинки будет как 100%.
|
|
|
|
15.03.2007, 15:26
|
|
Banned
Регистрация: 01.08.2006
Сообщений: 725
Провел на форуме:
7681825
Репутация:
4451
|
|
Я так понял тебе надо чтото вроде этого
Код:
<script>
function resize(id,width)
{
document.getElementById(id).style.width=width;
}
</script>
<img src='1.jpg' onclick="resize(this.id,500);" id='img1'/>
|
|
|
|
15.03.2007, 15:27
|
|
Новичок
Регистрация: 27.02.2007
Сообщений: 8
Провел на форуме:
33084
Репутация:
0
|
|
Мне нужна функиция, что бы при каждом нажатии на кнопку, количество пикселей увеличивалось на определенное число...
|
|
|
|
15.03.2007, 15:44
|
|
Флудер
Регистрация: 20.11.2006
Сообщений: 3,316
Провел на форуме:
16641028
Репутация:
2371
|
|
Вопроос в тему:
Как сделать , чтобы картинка выводилась в 30% уменьшенном формате, а рпи наведении на нее был истинный размер  |
|
|
|
15.03.2007, 15:55
|
|
Постоянный
Регистрация: 23.03.2006
Сообщений: 977
Провел на форуме:
2976185
Репутация:
694
|
|
2Isis, практически тоже самое что запостил Гема, только событие с onClick поменять на onMouseOver.
|
|
|
|
15.03.2007, 16:22
|
|
Флудер
Регистрация: 20.11.2006
Сообщений: 3,316
Провел на форуме:
16641028
Репутация:
2371
|
|
Неее.....мне надо чтобы бы было что-то типа тултипа.....
Сначала картинка должна отображаться в 3 раза меньше истинного размера, а как навел на картинку , она в нормальном размере как в тултипе должна высветиться...
|
|
|
|
15.03.2007, 16:37
|
|
Постоянный
Регистрация: 23.03.2006
Сообщений: 977
Провел на форуме:
2976185
Репутация:
694
|
|
я что то не понимаю что такое тул тип... Всмысле див сверху? Поточнее...
|
|
|
|
15.03.2007, 17:16
|
|
Постоянный
Регистрация: 17.09.2005
Сообщений: 375
Провел на форуме:
993362
Репутация:
175
|
|
Isis Тоже не понял что тебе надо...
если просто увлечиение/всплываение/появление оригинальной картинки при наведении мышкой на ту же картинку, только меньшего размера, то тут основную идею уже показали. Остальное уже шлифовка.
Можно более наворочено с помощью ajax'a, но смысл и основная идея от этого не сильно поменяются.
|
|
|
|
15.03.2007, 17:24
|
|
Новичок
Регистрация: 27.02.2007
Сообщений: 8
Провел на форуме:
33084
Репутация:
0
|
|
gemaglabin
Твой скрипт мне не совсем подходит, так как с помощью него картинка увеличивается лишь один раз...
Мне же надо, что бы нажатие на кнопку вело к увеличению картинки...При том нажимать можно несколько раз...
Вот...
|
|
|
|
|
|
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
|
|
Похожие темы
Линейный вид
