Как да увеличите изображенията на сайта чрез JavaScript и CSS (мащабиране)

Начало → на HTML уроци и съвети → Как да увеличите изображението на линия

Изображенията на сайта са често срещано явление и те са по-големи, но дизайна на сайта, не винаги е възможно да го поставите в пълен формат. Ето защо, ние трябва да мислим за по начин, който ще им позволи да се увеличи.

Да започнем с примитивни методи, и да завърши най-добрият начин за увеличаване на изображението.

1. Увеличаване на изображението чрез връзка

Най-лесният начин без никакъв CSS. Просто сложете линк към изображение с висока резолюция.

Обяснение например:

Последният параметър е доста важно, защото често се дължи на липсата на опит на потребителя да срещнете следната ситуация: откриването страницата със снимка, той не знае как да се върне, и затова просто затворите раздела, а след това напълно ляво на сайта. А предписване последния параметър, ние хеджиране срещу такова събитие, тъй като тя ще се отвори началната страница.

Въпреки лекотата на използване, този метод не е най-добрият, защото за по-голямо изображение трябва да се отвори нова страница, но този метод може да се използва, за да видите снимки на всички размери. Така че ние се заключи: ако искате да увеличите изображенията са много големи, това е единственият сигурен начин да го направя.

2. Автоматично увеличава изображението, когато задържите

Името на метода ясно отразява нейната същност: когато задържите курсора на мишката върху снимката автоматично ще се увеличи. Прилагане на метода на елементарни, но, отново, този метод е неблагоприятно, защото е невъзможно да се извършват нормално курсора на мишката върху изображението. В края на краищата, тя винаги ще се увеличи - това може да ядосат потребителя.

Следният код реализира възможността автоматично да я увеличите навъртам:

Обяснения например:

• img.zoom - определя ширината на изображението преди увеличението;
• img.zoom: навъртам - определя ширината на изображението след увеличение (няма параметър означава, че максималният размер отсъства);

3. Изображение когато се натисне

Това е най-честата и удобен метод за разширяване на изображения. И тук има много начини и варианти. Помислете за някои от най-популярните варианти:

3.1. Увеличението на активното фокуса

След едно кликване на мишката върху картинката, тя увеличава, но тъй като от него се плъзга надолу в текста надолу, така че този метод не е най-добрият. Ето един пример на код:

Как изглежда на страницата:

3.2. Увеличаване на върха на страницата

По-долу е кодът за прилагане на този метод

Как изглежда на страницата:

Опции 3.1 и 3.2 са напълно основани на CSS възможности, и така са "светлина" означава, както не зареди страницата с ненужни скриптове. Има и други варианти, които също са базирани на CSS, обаче, те са по-екзотично. Аз няма да ги обсъдим в тази статия, тъй като някои браузъри не поддържат такива неща.

3.3. красив увеличение

Този метод е най-красивите и удобни, по мое мнение. За да го свържете към имаме малко трудно с добавянето на различни скриптове, така че да изпълнява стъпка по стъпка поглед към инсталацията:

Архивът е папка, съдържаща изображението, две .js файл и един .css.

2) Добавяне на тези файлове на вашия сайт, тъй като те имат в архива (т.е. изобр папката трябва да е в директорията, където файловете ще .js и .css).

3) На всяка страница на сайта, където ще се използва увеличението на изображението, трябва да се свържете метод simplebox и стил:

Съветвам ви да укажете пълния път до simplebox_util.js на файловете. simplebox.css и simplebox.js. че те могат лесно да се използва за всяка страница.

За да използвате този метод, за мащаба, използвайте следната структура:

Как изглежда на страницата: