Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Плавное увеличение картинок

439
16 апреля 2009 года
Rexulnik
217 / / 09.02.2005
Всем привет!
Никто не знает как называется скрипт масштабирования картинок на ходу?
Т.е. есть маленькая картинка на странице, и при клике на неё она увеличивается плавно до там больших размеров.
Облазил весь инет и этот форум, но не могу найти.
Заранее спасибо
92
16 апреля 2009 года
Тень Пса
2.2K / / 19.10.2006
не весь облазил - lightbox
439
16 апреля 2009 года
Rexulnik
217 / / 09.02.2005
а есть ещё варианты?) желательно не плагины куда-то в джумлу, и без jQuery и Prototype а просто скрипты, для обычных сайтов, и без перекрытия всей страницы, а просто скрипт который картинку увеличивает и уменьшает при клике?)
13
16 апреля 2009 года
RussianSpy
3.0K / / 04.07.2006
jquery?
12
16 апреля 2009 года
alekciy
3.0K / / 13.12.2005
Я вот сюда http://www.ixbt.com/divideo/sapphire.shtml mootools приворачивал. Смотри исходники, если интересно.
12
16 апреля 2009 года
alekciy
3.0K / / 13.12.2005
Цитата: Rexulnik
а есть ещё варианты?) желательно не плагины куда-то в джумлу, и без jQuery и Prototype а просто скрипты, для обычных сайтов, и без перекрытия всей страницы, а просто скрипт который картинку увеличивает и уменьшает при клике?)


Конечно возможно. На нативном JS возможно все. Ищи, мне примеры попадались. Или сам напиши, скрипт не сказать, что из самых сложных.

563
17 апреля 2009 года
MrLinker
249 / / 17.09.2006
Вот, совершенно случайно попал на страницу:
http://jamesgrayarts.com/sea-sky.php
Это нужно?
439
17 апреля 2009 года
Rexulnik
217 / / 09.02.2005
Цитата: MrLinker
Вот, совершенно случайно попал на страницу:
http://jamesgrayarts.com/sea-sky.php
Это нужно?



да вот это примерно оно, только без прозрачности и при клике... а есть такое без jQuery и без прозрачности?

244
17 апреля 2009 года
UAS
2.0K / / 19.07.2006
Вообще не пойму что сложного это сделать на JavaScript.
Вот примерный код (могут быть и ошибки и т.д., так как не проверял):
Код:
img = document.getElementById("картинко");
height = img.style.height;
width = img.style.width;
k = width/height; // коэффициент отношения сторон
max_width = 640; // до какой ширины увеличиваем картинку
var ti; // идентификатор для интервала

function makeLarger() {
    if( width >= max_width ) {
        clearInterval(ti);
    } else {
        height++;
        width = ceil(height*k);
    }
}

ti = setInterval("makeLarger",500);
439
17 апреля 2009 года
Rexulnik
217 / / 09.02.2005
ну тут прикол в том, что картинка растягивается и сдвигает все остальные элементы, а надо чтобы она вылазила на верх, а потом при клике обратно возвращалась, я видел где-то были готовые реализации, но не помню как они называются(((
439
17 апреля 2009 года
Rexulnik
217 / / 09.02.2005
нашёл вот эту библиотеку http://highslide.com она пишется что работает под всеми браузерами, но работает почему-то только в IE... а в остальных показывает картинку загрузки и висит... что может быть за прикол?(
12
17 апреля 2009 года
alekciy
3.0K / / 13.12.2005
Цитата: UAS
Вообще не пойму что сложного это сделать на JavaScript.


1) Лень.
2) Отсутствие требуемой квалификации.

439
17 апреля 2009 года
Rexulnik
217 / / 09.02.2005
Цитата: alekciy
1) Лень.
2) Отсутствие требуемой квалификации.



Не стоит утруждать себя такими ответами.

244
17 апреля 2009 года
UAS
2.0K / / 19.07.2006
Нет, ну действительно. Если вы не можете в целом решить задачу, то давайте разобьем её на подзадачи (как, например, я подхожу к задачам, которые я не знаю).

Цель: сделать увеличение картинки, причем не в тексте, а в отдельном слое.
Разибваем на подзадачи:
1) Изменение размеров картинки.
Каждая картинка имеет свойство высоты и ширины (должны быть установлены в style). Значит от этого пляшем. Читаем как получить доступ к размерам. Далее изменение размера. В языках программирования есть таймеры, которые выполняют действия через какой-либо определенный момент времени. Значит можно каждый раз в этот интервал изменять размер картинки, а как достигнем нужного размера - остановиться.
Все. Вот задача решена. Теперь все просто и понятно. Остается только иметь немного знаний в программировании и порыться в документации к языку.

2) В отдельном слое.
Что значит в отдельном слое в данной задаче? Т.е. он должен быть поверх всей страницы. Читаем ман по html и сыы и находим, что можно сделать <div style="position:absolute;top:y:left:x;"></div>, где мы выделим слой поверх страницы (можно ещё z-index установить нужный).
Теперь что надо? Правильно, засунуть картинку в слой. Это абсолютно не проблема. Создаем объект картинки (читаем про DOM) и присоединяем его к слою.
Теперь надо сделать все красиво по центру? Мы знаем размер, до которого картинка увеличивается. Чтобы картинка была по центру - надо правильно высчитать координаты top и left для div. Для этого вспоминаем математику и ищем функции, как определить разрешение экрана у пользователя.

Вот и все. Ставим слой в нужную позицию. Аппендим к ней картинку. Запускаем функцию ресайза. Тем самым получим плавное увеличение картинки с северо-запада на юго-восток.

Осталось реализовать. Тем более функцию ресайза я вам написал уже. Осталось теперь только создать div и задать координаты top и left. Покопайтесь в документации=)
439
17 апреля 2009 года
Rexulnik
217 / / 09.02.2005
спасибо, но я уже решил проблему
563
18 апреля 2009 года
MrLinker
249 / / 17.09.2006
Странно, а почему вы считаете, что это примитивная задача?
Я не говорю, что это очень сложно, но все-таки для полноценной реализации желательно иметь опыт в написании кроссбраузерных скриптов, порыться в исходниках js-фреймворков, зайти на javascript.ru и почитать статью про основы программной анимации на JavaScript, бегать через каждые 15 минут на кухню за кофе, периодически объяснять родителям, что занят важным делом и не сможешь им помочь, опять отложить встречу с любимой девушкой и т.д.
Другое дело, что человек поленился найти и прикрутить один из тысячи готовых скриптов.

Цитата:
height = img.style.height;
width = img.style.width;


Это в большинстве случаев работать не будет. Для получения текущих свойств нужно вызывать getComputedStyle/currentStyle

12
18 апреля 2009 года
alekciy
3.0K / / 13.12.2005
Цитата: MrLinker
Странно, а почему вы считаете, что это примитивная задача?


По сути в вебе любая задача примитивна. Все что реально реализовать реализовывается достаточно легко. Это не более чем вопрос времени. Профессионал потратить чуть меньше времени (ибо когда то, при обучении, потратил его много), новичек чуть больше. Но если человек не будет лениться, то рано или позно осуществит поставленную задачу.

Буквально на днях получил показательный случай. Консультировал человека по переносу домена и настройке DNS и почтового сервера. Человек оказался очень понятливым и вполне в теме. А потом оказалось, что со всей этой кухней он знаком чуть меньше двух недель. Такие темпы меня впечатлили. А отчего так вышло? А потому что у человека 1) есть голова на плечах 2) кровный интерес, т.к. сайт простаивает все это время, а время деньги. Поэтому то я и считаю, что нет в вебе сложных задач, есть вопрос времени и необходимости побеждения лени ("ах, что бы это понят нужна не одна неделя, нафиг мне это нужно, если есть форум...").

563
18 апреля 2009 года
MrLinker
249 / / 17.09.2006
Как-то вы однополярно мыслите... И что по вашему есть сложность? Профессионалами не рождаются, чтобы им стать необходимо не просто потратить n часов времени, но и приложить различного рода усилия, т.е. потратить это время, занимаясь, как минимум, умственным трудом. А это не всем одинаково легко дается. Вашему знакомому что-то далось легко, а ведь есть области знаний, в которых будет испытывать те самые сложности, которых для вас почему-то не существует. Ту же лень перебороть — уже бывает сложно...

Дело не только во времени, а также в том, как это время использовать + индивидуальные особенности человека.

Причем, человек может блестяще разбираться в одной теме по физике, но никак не врубаться в другую. А другой наоборот.

Вам легко картинки в браузере крутить, а мне легче платы паять. А т.к. мы живем в эпоху бурной информатизации общества, то завтра и мне понадобиться картинку завертеть. И я приду на форум и попрошу помощи. Послезавтра вам понадобится плату спаять, которая картинку крутит. И что? Вы придете ко мне.

Если человек не будет трудится, ему и жизни не хватит.. Если не будешь решать сложные задачи — остановишься в развитии.
А если мы не будем друг другу помогать?

P.S. Когда сам чего-то достиг, легко рассуждать о простоте.
P.P.S. Курить тоже бросить легко. Сложно это понять.
12
18 апреля 2009 года
alekciy
3.0K / / 13.12.2005
Цитата: MrLinker

Вам легко картинки в браузере крутить, а мне легче платы паять. А т.к. мы живем в эпоху бурной информатизации общества, то завтра и мне понадобиться картинку завертеть. И я приду на форум и попрошу помощи. Послезавтра вам понадобится плату спаять, которая картинку крутит. И что? Вы придете ко мне.


Я умею паять (и не только), и могу заметить делаю это достаточно хорошо ;)

Ты меня немного не понял. Я не стал это декларировать, т.к. в данном контексте мне это казалось очевидным, но я говорю о работе в пределах одной специализации. Я занимаюсь програмингом для веба и в пределах этой специализации я и говорю о легкости. Т.е. в пределах своей специализации человеку что-то либо сделать должно быть просто, вопрос просто времени. И в другие специализации он лезть не должен. Я не умею водить танк, я и не полезу за рычаги, тем паче я не буду обсуждать какие то методики лучшего вождения.

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог