Как да смените изображението, когато задържите курсора върху него, или малко за задържане на мишката ефекти

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

Първо, помислете за вариант е по-лесно. Да предположим, че сте поставили снимка на страницата, както е показано по-долу:

И да речем, че трябва да го промените показването когато мишката върху него с курсора на мишката. Когато поставите по-голям dobvim на IMG таг атрибут клас = "animate1". а след това на HTML-кода на изображението ще изглежда така:

За начало, можете просто да задържите курсора на мишката, за да стане ясно на снимката. За прозрачност в CSS непрозрачност собственост отговаря. който се отнася до CSS3. Стойността се използва дробни числа от 0 до 1, където нула съответства на пълна прозрачност и единица, напротив, непрозрачността на обекта. За по-стари версии на Internet Explorer, което трябва да се използва филтър имота със стойност на алфа (непрозрачност = X). тъй като те не подкрепят непрозрачност имота. Вместо X ще трябва да замени число от 0 до 100, където 0 означава пълна прозрачност, и 100 - пълна непрозрачност.

След това, за да направи снимката ясно, когато се преместите курсора към файла стил, или между тагове и HTML-файл, трябва да добавите следния CSS-код:

В случай, че не сте запознати с CSS, ще обясня, че запис img.animate1 на: навъртам казва на браузъра, че всички елементи , с клас атрибут равен animate1 когато мишката върху тях курсора на мишката, прилагат тези стилове. Определен стилове между скобите <и>. Ако всичко е направено правилно, трябва да получите нещо подобно:

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

img.animate1 филтър: алфа (непрозрачност = 25);
непрозрачност: 0.25;
>
img.animate1: висене филтър: алфа (непрозрачност = 100);
непрозрачност: 1;
>

Резултатът ще бъде:

За допълнителен ефект, можете да се забави промените в прозрачността на изображението. Можете да използвате собственост на CSS преход. което създава ефект на прехода между две държави-членки. Добави например, една секунда бавен. Тогава нашата CSS код ще бъде, както следва:

img.animate1 филтър: алфа (непрозрачност = 25);
непрозрачност: 0.25;
-Моз-преход: 1-ци лекота в автомобила; / * Ефект преход за Firefox до версия 16.0 * /
-WebKit-преход: 1-ци лекота в автомобила; / * Ефектът на преход за Chrome до версия 26.0, Safari, Android и IOS * /
-о-преход: 1-ци лекота в автомобила; / * Ефектът на преход за Opera до версия 12.10 * /
преход: 1-ци лекота в автомобила; / * Ефект преход за други браузъри * /
>
img.animate1: висене филтър: алфа (непрозрачност = 100);
непрозрачност: 1;
>

С свойства трансформират изображение може да се мащабира, завърта, изместен, наклони. Нека се опитаме да видите по-голямо изображение. Тогава CSS-кодът ще бъде:

img.animate1 - Moz прехода: всички 1s облекчаване;
- WebKit прехода: всички 1s облекчаване;
- о-преход: всички 1s облекчаване;
преход: всички 1s облекчаване;
>
img.animate1: висене - Moz трансформация: скала (1.5); / * Ефектът на трансформация за Firefox до версия 16.0 * /
- WebKit трансформация: скала (1.5); / * Ефектът на трансформация за Chrome до версия 26.0, Safari, Android и IOS * /
- о-трансформиране: скала (1.5); / * Ефектът на преобразуването на операта до версия 12.10 * /
- MS трансформация: скала (1.5); / * Ефектът на трансформация за IE 9.0 * /
Трансформация: скала (1.5); / * Ефектът на трансформация за други браузъри * /
>

И резултатът ще бъде:

За да увеличите картината, можете да добавите обрат. Тогава CSS стилове варират леко:

img.animate1 - Moz прехода: всички 1s облекчаване;
- WebKit прехода: всички 1s облекчаване;
- о-преход: всички 1s облекчаване;
преход: всички 1s облекчаване;
>
img.animate1: висене - Moz трансформация: завъртане (360deg) скала (1.5);
- WebKit трансформация: завъртане (360deg) скала (1.5);
- о-трансформиране: завъртане (360deg) мащаб (1.5);
- MS-трансформират: завъртане (360deg) мащаб (1.5);






Трансформация: завъртане (360deg) скала (1.5);
>

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

Да предположим, че имаме две изображения, един черен, а другият бял цвят:

Направете го, така че когато мишката върху черно-бял цвят на дисплея изображението. За да направите това, оригиналната снимка ще направи фона на DIV с фон на имот. И когато navednii курсора върху изображението ще промените фоновото изображение с помощта на един и същи псевдо-навъртам и собственост заден план. За реализиране на тази цел на страницата на HTML добавите DIV елемент с клас rotate1:

И добави следните описания на стилове:

div.rotate1 фон: URL (IMG / 2.jpg); / * По пътя към файла с оригиналния модел * /
ширина: 480px; / * Ширина * картина /
Височина: 360 пиксела; / * Височина * фигура /
>
div.rotate1: мишката фон: URL (IMG / 1.jpg); / * File Path с взаимозаменяеми модел * /
>

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

Следващият метод се основава на съчетаването на две изображения в един файл. Да кажем, че ние трябва да се постави на един бутон на страницата, която, когато мишката върху него с курсора на мишката, за да промените външния вид. За тази цел двете изображения се обединяват в един файл, а получената картина ще изглежда така:

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

И в CSS-файл по следния начин:

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

И добави с CSS стилове:

animate2 позиция: относителна;
марж: 0 автомобил; / * ustanvalivaem на DIV в средата на листа * /
ширина: 480px; / * Ширина * /
Височина: 360 пиксела; / * Височина * /
>
.animate2 IMG позиции: абсолютен; / * Абсолютно позициониране * /
лява: 0; / * Изравнете изображението в горния ляв ъгъл на DIV-а * /
Горе: 0; / * Изравнете изображението в горния ляв ъгъл на DIV-а * /
>

След добавяне на правилата на CSS, снимки ще бъдат поставени под един от друг. Сега контролиране на прозрачността на изображения с помощта на непрозрачност имота в нормално състояние ще покаже втората снимка, и когато курсорът на първо място. За да направите това, в нормално състояние да направи снимка с класа първата напълно прозрачен, а когато курсорът е обратното: снимка с класа на втория ще бъде напълно прозрачен и с първа класа не е прозрачна:

Възможно е да се постигне плавен преход към крайната правило добавяне на CSS преход имота:

animate2: мишката img.second. animate2 img.second: мишката непрозрачност: 0;
филтър: алфа (непрозрачност = 0);
-Moz прехода: всички 2s облекчаване;
-WebKit прехода: всички 2s облекчаване;
-о-преход: всички 2s облекчаване;
преход: всички 2s облекчаване;
>

И ако добавите трансформиращите имот:

animate2: мишката img.second. animate2 img.second: мишката непрозрачност: 0;
филтър: алфа (непрозрачност = 0);
-Moz трансформация: скала (0, 1);
-WebKit трансформация: скала (0, 1);
-о-трансформиране: скала (0, 1);
-MS трансформация: скала (0, 1);
Трансформация: скала (0, 1); / * Намалява ширината на изображението на 0 * /
>

Чрез комбиниране на различни CSS свойства могат да бъдат постигнати различни Hover ефекти при смяна на снимки по време на курсора на мишката. Тези и други примери имам пуснати на тази страница. Там можете да изтеглите изходния код. Това е всичко, докато се срещнем отново.

е пътят към картината не попита вярно. код трябва да се гледа, твърде малко информация.

Така че има прост.

Да кажем, че имате две снимки на 100 на 100 пиксела. За да направите от тях един чрез поставяне на първата снимка от върха, на второ място от дъното. Можете да получите на снимката 100 до 200.

На страницата, можете да направите устройството размера на оригиналното изображение: 100 от 100, и да зададете като фоново изображение на получена.

Завъртете, за да се вижда само горната половина на фоновото изображение, т.е. първата рисунка.

Висене се повлияе модел на потока, използвайки фон-позиция на 100 пиксела нагоре, т.е. zadaeta фон-позиции: 0 -100px;

В този случай, то ще бъде видимо по-ниско от половината от тапета - втората снимка.

Случайни зареждане на изображението с изображения специфичен витае (прехвърляния) / произволно изображение на курсора на мишката скрипт /

функция randomPick (ARR)

VAR избрани = ARR [Math.floor (Math.random () * arr.length)]

Благодаря за статията. Произведено в сайта си animate4 ефект - работи! Имаше няколко въпроса: стилове, е наложително да се предпише? За първи път се опитах да се регистрирате в CSS файла - не работи. И още един. Тъй като тези стилове работят на мобилен сайт? След курсора не е действително се изпълнява тази функция, кликнете върху снимката. Аз се отваря, когато кликнете върху снимката на друго място. Бих искал да запази тази функция, но с въвеждането на нови стилове animate4 тя изчезнали. И как да се приложи връщането на изображението към нормален размер? щракнете някъде близо? Тя не работи. Може ли това също по някакъв начин да се регистрирам?

Дийн: Добър ден!

Стилове могат да бъдат предписани в CSS-файл. Явно имаш някъде грешка.