Ñåãîäíÿ ìû çàéìåìñÿ ðàçðàáîòêîé èíòåðåñíîãî ýôôåêòà íàëîæåíèÿ ñ ïîìîùüþ jQuery, â êîòîðîì íå áóäåò èñïîëüçîâàòüñÿ íèêàêîãî íàëîæåíèÿ. Èäåÿ çàêëþ÷àåòñÿ â òîì, ÷òîáû èçìåíèòü óðîâåíü ïëîòíîñòè öâåòà êîíêðåòíûõ ýëåìåíòîâ, ÷òî èìèòèðóåò ýôôåêò íàëîæåíèÿ. Ýòî ïîçâîëÿåò ñôîêóñèðîâàòü âíèìàíèå íà îïðåäåëåííûõ ýëåìåíòàõ, îòâëåêàÿñü îò âñåõ ïîñòîðîííèõ.
Äëÿ íà÷àëà, íàì íóæíî îïðåäåëèòü, êàêèå ýëåìåíòû áóäóò «çàòóõàòü» (ò.å. íà êàêèõ ýëåìåíòàõ ìû õîòèì âèäåòü òàê íàçûâàåìîå íàëîæåíèå). Äàëåå ìû çàäàåì íóæíûì ýëåìåíòàì êëàññ e-fade, à ýëåìåíòàì, êîòîðûå äîëæíû ïîìåíÿòü öâåò, êëàññ e-color. Äëÿ ëþáîãî èç ýòèõ ýëåìåíòîâ (íåâàæíî, êàêîé èç êëàññîâ, à ìîæåò è îáà ñðàçó, ìû ïðèìåíèëè) íàì íóæíî çàäàòü êëàññ effect.
Ïîñìîòðèòå íà ïðèìåð ïðèìåíåíèÿ äàííûõ êëàññîâ â ñëåäóþùåì êîäå HTML:
<!-- Animates the color --> <h2 class="effect e-color">Custom effects with jQuery</h2>
<!-- Animates the opacity --> <h2 class="effect e-fade">Custom effects with jQuery</h2>
<!-- Animates both color and opacity --> <h2 class="effect e-color e-fade">Custom effects with jQuery</h2>
 íàøåì ïðèìåðå ìû èñïîëüçóåì ìåíþ äëÿ òîãî, ÷òîáû çàäåéñòâîâàòü ñîáûòèÿ àíèìàöèè. Êîãäà ìû íàâîäèì êóðñîð ìûøè íà ìåíþ, âûïîëíÿþòñÿ ñîîòâåòñòâóþùèå ýôôåêòû.
Äëÿ òîãî ÷òîáû óëó÷øèòü ýôôåêò, ìû ïðèäàäèì åùå îäèí êëàññ (îí-òî è ïîêàæåò íàì, êàêîé èç ýëåìåíòîâ îñòàíåòñÿ íåòðîíóòûì). Ýòî äàñò íàì âîçìîæíîñòü ñôîêóñèðîâàòü âíèìàíèå ïîñåòèòåëÿ íà îïðåäåëåííîì ýëåìåíòå. Èìÿ êëàññà áóäåò òàêèì æå, êàê è ID äëÿ îäíîãî èç ïóíêòîâ ìåíþ. Òàêèì îáðàçîì, ìû ñîçäàåì âçàèìîîòíîøåíèå ìåæäó íèìè:
<ul id="menu" class="menu"> <li><a href="#"><img src="images/1.png" alt="1"/></a></li> <li><a href="#"><img src="images/2.png" alt="2"/></a></li> <li><a href="#"><img src="images/3.png" alt="3"/></a></li> <li><a href="#"><img src="images/4.png" alt="4"/></a></li> <li><a href="#" id="effect-n"><img src="images/5.png" alt="5"/></a></li> </ul>
...
<h3 class="effect-n">Vapour around me</h3>
Êàê âèäíî, ïîñëåäíèé ïóíêò ìåíþ ïîëó÷àåò îòíîñèòåëüíûé ID, à h3 ïîëó÷àåò êëàññ ñ òàêèì æå èìåíåì. Èòàê, êîãäà ìû íàâîäèì êóðñîð íà ïóíêò ìåíþ, âñå äðóãèå ýëåìåíòû (ó êîòîðûõ âûñòàâëåíû ïðåäûäóùèå êëàññû ýôôåêòà) áóäóò ïîäâåðæåíû àíèìàöèè, çà èñêëþ÷åíèåì îäíîãî êîíêðåòíîãî.
Òåïåðü äàâàéòå ðàññìîòðèì javascript. Äàâàéòå íà÷íåì ñ êýøèðîâàíèÿ íåêîòîðûõ ýëåìåíòîâ:
var $menu = $('#menu'), $container = $('#container'), $content = $container.find('.content');
Ìû äîáàâèì êëàññû äëÿ ýëåìåíòîâ, èñïîëüçóþùèõ jQuery âìåñòî òîãî, ÷òîáû äîáàâëÿòü êëàññû âðó÷íóþ ïîñðåäñòâîì êîäà HTML.
$content .find('p') .addClass('effect e-fade') .end() .find('h1, h2, h3') .addClass('effect e-fade e-color');
Òåïåðü ìû âîçüì¸ì âñå ýëåìåíòû ñ ïðèñâîåííûì êëàññîì effect è îïðåäåëèì ôóíêöèþ OverlayEffect, êîòîðàÿ è áóäåò îòâå÷àòü çà àíèìàöèþ:
var $elems = $(document).find('.effect'), OverlayEffect = (function(){ //speed for animations var speed = 1000, //the event that triggers the effect eventOff = 'mouseenter', //the event that stops the effect eventOn = 'mouseleave', //this is the color that the elements will have after eventOff colorOff = '#AAAAAA', //saves the original color of each e-color element, //and calls the methods to initialize the events init = function() { $elems.each(function(){ var $el = $(this); if($el.hasClass('e-color')) $el.data('original-color',$el.css('color')); }); initEventsHandler(); }, //initializes the events eventOff / eventOn initEventsHandler = function() { $menu .delegate('a',eventOff,function(e){ //relation is the id of the element, //and the class of related elements var relation = $(this).attr('id'); animateElems('off',relation); return false; }) .delegate('a',eventOn,function(e){ var relation = $(this).attr('id'); animateElems('on',relation); return false; }); }, //animates the color and / or opacity animateElems = function(dir,relation) { var $e = $elems;
switch(dir){ case 'on' : //if there are elements on the page with class = relation //then these elements will be excluded from the animation if(relation) $e = $elems.not('.'+relation);
$e.each(function(){ var $el = $(this), color = $el.data('original-color'), param = {};
if($el.hasClass('e-color')) param.color = color; if($el.hasClass('e-fade')) param.opacity = 1;
$el.stop().animate(param,speed); });
break; case 'off' : if(relation) $e = $elems.not('.'+relation);
$e.each(function(){ var $el = $(this), param = {};
if($el.hasClass('e-color')) param.color = colorOff; if($el.hasClass('e-fade')) param.opacity = 0.1;
$el.stop().animate(param,speed); });
break; } };
return { init : init }; })();
/* call the init method of OverlayEffect */ OverlayEffect.init(); });
Âîò è ãîòîâî!
Íàäååìñÿ, ÷òî âàì ïîíðàâèëàñü äàííàÿ ñòàòüÿ è ÷òî îíà âàì ïðèãîäèòñÿ â äàëüíåéøåì!
Ïîñìîòðåòü äåìî | Ñêà÷àòü àðõèâîì
Âíèìàíèå! Ó âàñ íåò ïðàâ äëÿ ïðîñìîòðà ñêðûòîãî òåêñòà.
Âåðíóòüñÿ íàçàä
|