Плавное увеличение картинок
Никто не знает как называется скрипт масштабирования картинок на ходу?
Т.е. есть маленькая картинка на странице, и при клике на неё она увеличивается плавно до там больших размеров.
Облазил весь инет и этот форум, но не могу найти.
Заранее спасибо
Конечно возможно. На нативном JS возможно все. Ищи, мне примеры попадались. Или сам напиши, скрипт не сказать, что из самых сложных.
да вот это примерно оно, только без прозрачности и при клике... а есть такое без jQuery и без прозрачности?
Вот примерный код (могут быть и ошибки и т.д., так как не проверял):
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);
1) Лень.
2) Отсутствие требуемой квалификации.
2) Отсутствие требуемой квалификации.
Не стоит утруждать себя такими ответами.
Цель: сделать увеличение картинки, причем не в тексте, а в отдельном слое.
Разибваем на подзадачи:
1) Изменение размеров картинки.
Каждая картинка имеет свойство высоты и ширины (должны быть установлены в style). Значит от этого пляшем. Читаем как получить доступ к размерам. Далее изменение размера. В языках программирования есть таймеры, которые выполняют действия через какой-либо определенный момент времени. Значит можно каждый раз в этот интервал изменять размер картинки, а как достигнем нужного размера - остановиться.
Все. Вот задача решена. Теперь все просто и понятно. Остается только иметь немного знаний в программировании и порыться в документации к языку.
2) В отдельном слое.
Что значит в отдельном слое в данной задаче? Т.е. он должен быть поверх всей страницы. Читаем ман по html и сыы и находим, что можно сделать <div style="position:absolute;top:y:left:x;"></div>, где мы выделим слой поверх страницы (можно ещё z-index установить нужный).
Теперь что надо? Правильно, засунуть картинку в слой. Это абсолютно не проблема. Создаем объект картинки (читаем про DOM) и присоединяем его к слою.
Теперь надо сделать все красиво по центру? Мы знаем размер, до которого картинка увеличивается. Чтобы картинка была по центру - надо правильно высчитать координаты top и left для div. Для этого вспоминаем математику и ищем функции, как определить разрешение экрана у пользователя.
Вот и все. Ставим слой в нужную позицию. Аппендим к ней картинку. Запускаем функцию ресайза. Тем самым получим плавное увеличение картинки с северо-запада на юго-восток.
Осталось реализовать. Тем более функцию ресайза я вам написал уже. Осталось теперь только создать div и задать координаты top и left. Покопайтесь в документации=)
Я не говорю, что это очень сложно, но все-таки для полноценной реализации желательно иметь опыт в написании кроссбраузерных скриптов, порыться в исходниках js-фреймворков, зайти на javascript.ru и почитать статью про основы программной анимации на JavaScript, бегать через каждые 15 минут на кухню за кофе, периодически объяснять родителям, что занят важным делом и не сможешь им помочь, опять отложить встречу с любимой девушкой и т.д.
Другое дело, что человек поленился найти и прикрутить один из тысячи готовых скриптов.
width = img.style.width;
Это в большинстве случаев работать не будет. Для получения текущих свойств нужно вызывать getComputedStyle/currentStyle
По сути в вебе любая задача примитивна. Все что реально реализовать реализовывается достаточно легко. Это не более чем вопрос времени. Профессионал потратить чуть меньше времени (ибо когда то, при обучении, потратил его много), новичек чуть больше. Но если человек не будет лениться, то рано или позно осуществит поставленную задачу.
Буквально на днях получил показательный случай. Консультировал человека по переносу домена и настройке DNS и почтового сервера. Человек оказался очень понятливым и вполне в теме. А потом оказалось, что со всей этой кухней он знаком чуть меньше двух недель. Такие темпы меня впечатлили. А отчего так вышло? А потому что у человека 1) есть голова на плечах 2) кровный интерес, т.к. сайт простаивает все это время, а время деньги. Поэтому то я и считаю, что нет в вебе сложных задач, есть вопрос времени и необходимости побеждения лени ("ах, что бы это понят нужна не одна неделя, нафиг мне это нужно, если есть форум...").
Дело не только во времени, а также в том, как это время использовать + индивидуальные особенности человека.
Причем, человек может блестяще разбираться в одной теме по физике, но никак не врубаться в другую. А другой наоборот.
Вам легко картинки в браузере крутить, а мне легче платы паять. А т.к. мы живем в эпоху бурной информатизации общества, то завтра и мне понадобиться картинку завертеть. И я приду на форум и попрошу помощи. Послезавтра вам понадобится плату спаять, которая картинку крутит. И что? Вы придете ко мне.
Если человек не будет трудится, ему и жизни не хватит.. Если не будешь решать сложные задачи — остановишься в развитии.
А если мы не будем друг другу помогать?
P.S. Когда сам чего-то достиг, легко рассуждать о простоте.
P.P.S. Курить тоже бросить легко. Сложно это понять.
Вам легко картинки в браузере крутить, а мне легче платы паять. А т.к. мы живем в эпоху бурной информатизации общества, то завтра и мне понадобиться картинку завертеть. И я приду на форум и попрошу помощи. Послезавтра вам понадобится плату спаять, которая картинку крутит. И что? Вы придете ко мне.
Я умею паять (и не только), и могу заметить делаю это достаточно хорошо ;)
Ты меня немного не понял. Я не стал это декларировать, т.к. в данном контексте мне это казалось очевидным, но я говорю о работе в пределах одной специализации. Я занимаюсь програмингом для веба и в пределах этой специализации я и говорю о легкости. Т.е. в пределах своей специализации человеку что-то либо сделать должно быть просто, вопрос просто времени. И в другие специализации он лезть не должен. Я не умею водить танк, я и не полезу за рычаги, тем паче я не буду обсуждать какие то методики лучшего вождения.