CSS използва свойството overflow за създаване на миниатюри с възможност за промяна на размера, css
css, html, php, javascript, jQuery, ajax ... - решения, примери, рецепти
CSS: Използване на свойството overflow за създаване на миниатюри с възможност за промяна на размера.
Тази работа е извършена от Ален Гракалич. В статията CSS: създаване на диаграми вече запознах читателите на блога с неговите оригинални идеи и сега намерих друго интересно, елегантно решение, с което предлагам да се запозная подробно ...
И така, за какво е? Понякога на страницата няма достатъчно място за показване на големи изображения, но все пак наистина искате да избегнете малки и трудно разпознаваеми изображения. Използвайки предложения трик, ние ограничаваме видимите размери на изображението и показваме изображението в пълен размер само когато потребителят задържи курсора на мишката върху миниатюрното изображение. Все пак вижте примера:
Можете да изтеглите изходния код на примера и да възпроизведете този пример на вашия сайт.
Това, което виждаме, не е действителното преоразмеряване на изображението. Това е преоразмеряването на видимата област при задържане на показалеца на мишката. Това използва свойството CSS за препълване.
Свойствотоoverflow определя показването на съдържание, когато прелива областта на контейнера. Ако контейнерът е ограничен по някаква причина, свойството overflow се използва за определяне на поведението на контейнера при препълване. Възможните стойности за свойството за препълване са видими, скрити, превъртане и автоматично. Този трик е изграден върху използването на свойството overflow. По подразбиране част от картината е скрита и се появява само когато преместите показалеца на мишката.
Идеята е да поставите изображението в някакъв контейнер. Нека се съгласим, че тагътa ще бъде такъв контейнер за изображението. Ние монтирамеразмери (ширина и височина) на контейнера до изискваните стойности и задайте свойството позиция на контейнера на относително. Изображението вътре има позиция: абсолютна. Използвайте отрицателни стойности за горните и левите свойства, за да компенсирате изображението. Така сега виждаме само част от картината в нашия контейнер. Останалата част от снимката е скрита. И ще се покаже изцяло само при задържане на показалеца на мишката, т.е. с a:hover задаваме свойството overflow на visible и показваме цялото изображение.
HTML код - не може да бъде по-лесно:
Сега CSS кодът, който ще дефинира поведението при задържане на мишката върху изображението.
Тази идея може да се използва и за едно изображение. Вероятно не си струва да анализираме подробно изходния код, тъй като в частта, която ни интересува, той не се различава по никакъв начин от този, който вече анализирахме. И пример - моля:
Можете да изтеглите изходния код на примера и да възпроизведете този пример на вашия сайт.
Това е всичко. Надявам се да е полезно на някого.
17 отзива за „CSS: Използване на свойството за преливане за създаване на миниатюри с възможност за промяна на размера.“
Отличен Генадий, много полезна функция, подходяща за малка галерия
Как да добавите ефект? така че картината да се увеличава плавно?
MFD - страхувам се, че този ефект е постижим само с помощта на JS
Идеята е много добра, но ще има много недостатъци, когато се използва в галерия. Все още обичам Lightbox
>Как да добавя ефект? така че картината да се увеличава плавно?
благодаря Генади. Страхотна бележка! ще има повече такива "трикове" и светът ще стане по-добро място) наистина ще ми бъде полезно - скоро ще покажа къде се прилага
нещо по някакъв начин не се увеличава, никога не се оказва, просто първоначално скриваме част от картината и когато задържите мишката -ние също показваме скритата част ... IMHO - това далеч не е подходящо за всички ... по-добре е да покажете по-малка версия на картината в състояние по подразбиране, да речем, 50x50 пиксела, и при задържане - пълно, това ще бъде нормална опция и потребителят, гледайки малък преглед, няма да пропусне нищо, но във вашата версия голяма част от снимката не се вижда първоначално ...
Забравих да добавя всичко по-горе - IMHO и нямам оплаквания към никого, всеки сам е творец на своето щастие и го създава както иска
И IMHO дори е по-красива от намалената версия. Колко можете да видите на версията 50x50 на снимката, която първоначално беше много по-голяма? Можете да подчертаете за всяка снимка някоя ключова част, която ще бъде ясно видима.
И не ми казвайте как можете да направите така, че елемент, например div, винаги да остава, например, в долната част на екрана, независимо от превъртането, и винаги да е видим за потребителя. Благодаря ти
Прочетете статията Как да натисна долен колонтитул в долната част на прозореца на браузъра с CSS?. В този случай долният колонтитул е div, който се избутва до дъното, ако има малко съдържание на страницата и се избутва до дъното на съдържанието, ако има много съдържание. Като цяло xhtml.ru има много полезна информация за CSS.
Има ли твърде много плувки? "ul#thumbs, ul#thumbs li margin:0; подложка:0; списък-стил:няма; >
ul#thumbs li float:left; margin-right:2px; border:1px solid #999; подложка:1px; > » Пренапишете като: ul, li margin:0; подложка:0; списък-стил:няма; float:left; >
ul li margin-right:2px; border:1px solid #999; > ul - също float в противен случай се свива. Следва: "ul#thumbs a display:block; float:left; ширина:70px; /* ширина на видимата част */ height:70px; /* височина на видимата част */ line-height:70px; препълване: скрито; /* скрий "екстра" */ position:relative; /* важно е! */ z-индекс:1; > » Пренапишете като: ul li a width:70px; височина:70px; line-height:70px; препълване: скрито; дисплей: блок; позиция: относителна; z-индекс:1; > За или дисплей:блок; или просто float:left; което също дава блокиране на елемента. Тъй като всъщност няма нищо за плаване и не е нужно, ние просто оставяме display: block; Следващ "ul#thumbs a img float:left; позиция: абсолютна; отгоре:-10px; ляво:-35px; >" Тук също не е необходим float. Отново, няма смисъл да премахвате изображения от потока, така че можете също да зададете позиция: относителна;
Благодаря Gennady за превода, много полезна функция, иначе се опитах да направя нещо на js + css , т.е. първо свързваме js_script в заглавката и след това показваме скритото изображение в текста с DIVs, за тези, които се интересуват, мога да пиша по-подробно, но версията, преведена от Gennady, ми хареса повече, благодаря!
Много полезен пример, но ако изображението е по-малко от div за визуализация, би било хубаво да е центрирано, в противен случай то заема горния ляв ъгъл.
Ех.. и аз все още търся как да направя слайдер на базата на преливане. Въпреки че не е същото, все пак благодаря.
Доста оригинална идея. Ще го запазя за бъдеща употреба. Някак си не ми хрумна да използвам overflow специално за такава задача - все повече и повече jQuery