Главна View - Piggy разработчик. Всичко, свързано с проектирането, разработването и създаването на сайтове
Главна View - блог за дизайн, уеб дизайн и уеб разработки. Ако се развиват уеб сайтове, или се интересуват от уеб дизайн и дизайн само на нещата около нас, или просто се интересувате от теми, уеб дизайн и уеб разработки, този блог ще ви бъде много полезен. От блога може да намерите статии, ревюта, уроци и още много други.
Вероятно мнозина са изправени пред задачата да създаде един интересен ефект, когато задържите курсора на мишката върху снимката. Разбира се, има много различни ефекти, които оживяват на сайта се дължи на факта, че потребителят вижда на действията им отговорят. Наскоро имах нужда да се прилага ефектът да се увеличи, когато курсора на мишката. Мислех, че реализацията на този ефект може да бъде от интерес за вас.
Как изглежда
Как работи това
За да започнете, като винаги се определят миниатюри и създаване на контейнер, който ще съдържа нашия имидж. I избра такива размери: картинка в нормална форма е с големина от 150x150 пиксела, и когато курсора на мишката се променя своите размери 250x250 пиксела. Аз съзнателно са избрали в голям мащаб, за да ви покаже работата на ефекта. В действителност, по-добре да се направи разликата не е много голяма, така че ефектът изглежда по-гладко.
Така че, нашата структура:
След това, ние трябва да зададете правила за CSS за всеки от елементите. Нашата задача е да се изгради с CSS миниатюри в хоризонтална линия. Без CSS правила Thumbnails Следваща вертикална IDNA след друг.
Добавете следния код:
След тази стъпка, ние се получи желаното оформление и външния вид на нашите миниатюри. Ние завърши сделката, добавяйки, JQuery функционалност. Кодът е много прост и да обясни работата си, мисля, че не е необходимо. Ние създаваме две функции, които обработват събития насоки и да се съсредоточи на курсора на мишката.
Добави код на страницата в раздела за таг
Надявам се, че не съм забравил себе си Plug JQuery библиотеката преди това.
Изпълнявайки функциите не само промените размера на изображението, но и да го измести. Както е показано I се измества хоризонтално и вертикално от 50 пиксела. Ако използвате други размери, трябва да се брои за вашия случай новата стойност на тези премествания. Например, ако си миниатюри имат оригиналния размер на 100x100 пиксела, а вие ги увеличи до 200x200 пиксела, ви компенсира може да се дефинира като (200-100) / 2 = 50 пиксела. В този случай, то съвпадна с моето пристрастия, но и други ценности, разбира се, ще бъдат различни.
Това е цялата реализацията на ефекта на увеличаване на изображението на курсора на мишката. Надявам се, че този урок ще бъде полезна за вас. Благодаря ви за вниманието.
Останете Свързани
С четене този сайт, вие се съгласявате с използването на Cookie файлове. В противен случай оставете този сайт. Съгласен съм