#jquery #dynamic #resize
#jquery #динамический #изменение размера
Вопрос:
Если вы посмотрите на emmawatson.com или ted.com , вы заметите, что существует несколько панелей, или разделов, размер которых изменяется при наведении курсора мыши.
В emmawatson.com , они фактически заставляют другие divs динамически изменять размер в зависимости от наведения курсора мыши на div.
Я хотел бы создать аналогичный эффект, используя щелчок, для divs в пределах определенной границы.
Как это можно сделать?
Псевдокод выглядит следующим образом:
$(div*containing"input").function()
div*containing"input".resize(when input element is active)
otherDivs.move(get out of the way so this div can expand)
$(xButton).click(bring things back to their original size)
Не смейтесь над моим псевдокодом. Я новичок в этом. : P
Комментарии:
1. я не вижу его на ted.com и emmawatson.com это вспышка… у вас есть другой пример?
2. В основном вам нужен оптимизатор с плавающей запятой, такой как isotope, или использование абсолютных позиционированных divs, чтобы это происходило без подслушивания. Более простой подход был бы чем-то вроде papermashup.com/demos/jquery-feature
3. @TimJoyce Я хочу, чтобы этот эффект вспышки использовался с помощью решения jQuery. И я в порядке с созданием эффекта, подобного TED, при котором div расширяется, а остальные сохраняют те же размеры, но с меньшей непрозрачностью. Я собираюсь сделать это функцией onClick. При щелчке на одном из входных элементов div, содержащий его, изменит размер.
4. @MarcoJohannesen это упрощенная версия того, что я хочу сделать. Если вы учитываете тот факт, что divs не имеют одинаковых размеров, и есть divs ниже, слева, справа и над определенными элементами, размер которых должен быть изменен соответствующим образом, это становится намного сложнее.
Ответ №1:
Вы обязательно должны посмотреть на jquery isotope http://isotope.metafizzy.co/demos/relayout.html . Этот плагин пересчитывает макет элемента при изменении размера элемента в выделении, а также делает многие другие решения для компоновки элементов элегантно простыми.
Он должен делать именно то, что вам нужно.
Комментарии:
1. Да, да, да!! Это именно то, что я ищу! Теперь мне просто нужно выяснить, как на самом деле использовать его и применить к моему дизайну. Большое вам спасибо! Если у вас будет такая возможность, пожалуйста, предложите некоторые рекомендации по фактическому включению в мой собственный дизайн. Еще раз, спасибо миллион!
Ответ №2:
Для этого вы можете использовать hover() метод в jQuery.
Метод наведения работает следующим образом: наведите курсор (поверх, вне); вставьте функции, которые вы хотите выполнить для «over» и «out», и все готово.
Итак, если вы хотите изменить размер изображений внутри div, как на emmawatson.com вы могли бы сделать что-то вроде следующего, используя методы наведения и css:
$(function(){
$("div").hover(function(){
$("div img").css({"height":"150%" , "width":"auto"}); //auto scales the width according to the image height
},
function(){
$("div img").css({"height":"auto" , "width":"auto"}); //auto resizes image back to default dimensions
});
});
Просто используйте какой-нибудь CSS, например overflow:hidden; , чтобы обрезать изображение внутри div, и все готово.
Кроме того, обязательно ознакомьтесь с документацией jQuery. Это творит чудеса!
Комментарии:
1. Мой ответ аналогичен тому, что делается на страницах, отличных от flash emmawatson.com . Домашняя страница этого веб-сайта использует flash.
2. Я понимаю, что могу изменить размер одного элемента, используя эффект наведения и некоторые базовые css, но проблема в том, что я бы хотел создать функцию для divA для изменения размера до определенной ширины onClick и изменения размеров divB, divC, divD, divE и divE. Затем я бы написал другую функцию для изменения размера divB onClick и изменения размеров divA и т. Д. Это непрактично писать длинную функцию для каждого отдельного div. Проверьте ссылку на скрипку, и вы увидите непрактичность этого метода, если я не неправильно понимаю. Спасибо! 🙂