jQuery插件jFade实现鼠标经过的图片高亮其它变暗
今天为大家带来一款鼠标经过当前高亮其它变暗jQuery插件jFade,此款插件能实现的功能简单而且很实用，当鼠标经过图片列表或是文字列表时悬停当前高亮显示，其它图片列表变暗突出显示鼠标当前悬停。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1"/>
<metaname="Author"content="pakaerf">
<scripttype='text/javascript'src='jquery.min.js'></script>
<scripttype='text/javascript'src='jfade.js'></script>
<linkrel="stylesheet"href="main.css" type="text/css"/>
<scripttype="text/javascript">
$().ready(function(){
$('.jfade_image').jfade();
$('.portfolio').jfade({
start_opacity:".4",
high_opacity:"1",
low_opacity:".2",
timing:"500"
});
$('.button').jfade({
start_opacity:"1",
high_opacity:"1",
low_opacity:".4",
timing:"500"
});
$('.text').jfade({
start_opacity:"1",
high_opacity:"1",
low_opacity:".7",
timing:"500"
});
$('.links').jfade({
start_opacity:".9",
high_opacity:"1",
low_opacity:".2",
timing:"500"
});
});
</script>
</head>
<body>
<divid="wrapper">
<h1>jFade</h1>
<p>jFadeisasimplejqueryplug-inthatletsyouhighlightitemsonyourwebsite.Notonlyarecustomizablefadespossible,buteasycontrolofsurroundingelementsmakesyourmostimportantcontentstandout.</p><br/>
<h2>PortfolioGallery</h2><br/>
<p>(Fadeadjoiningobjectsout)</p>
<divid="images">
<imgsrc="images/card02.jpg"class="jfade_image"/>
<imgsrc="images/card04.jpg"class="jfade_image"/>
<imgsrc="images/card09.jpg"class="jfade_image"/>
<imgsrc="images/card13.jpg"class="jfade_image"/>
<imgsrc="images/card14.jpg"class="jfade_image"/>
<imgsrc="images/card15.jpg"class="jfade_image"/>
<imgsrc="images/card16.jpg"class="jfade_image"/>
<imgsrc="images/card17.jpg"class="jfade_image"/>
</div><br/><br/>
<p>Tousedefaultsettingsjustaddthefunction</p>
<code><scripttype="text/javascript"> <br/>
$().ready(function(){<br/>
$('.jfade_image').jfade();<br/>
}); <br/>
</script></code><br/><br/>
<p>andaddtheclasstagtoeachelement:</p>
<code><imgsrc="images/card02.jpg"class="jfade_image"/><br/>
<imgsrc="images/card04.jpg"class="jfade_image"/><br/>
<imgsrc="images/card09.jpg"class="jfade_image"/><br/>
<imgsrc="images/card13.jpg"class="jfade_image"/><br/>
<imgsrc="images/card14.jpg"class="jfade_image"/><br/>
<imgsrc="images/card15.jpg"class="jfade_image"/><br/>
<imgsrc="images/card16.jpg"class="jfade_image"/><br/>
<imgsrc="images/card17.jpg"class="jfade_image"/></code><br/><br/>
<p>Customsettingsareeasilysetandexplainedinthehelpdoc</p><br/><br/>
<h2>PortfolioGallery2</h2><br/>
<p>(Fadeobjectsin)</p>
<divid="images">
<imgsrc="images/card02.jpg"class="portfolio"/>
<imgsrc="images/card04.jpg"class="portfolio"/>
<imgsrc="images/card09.jpg"class="portfolio"/>
<imgsrc="images/card13.jpg"class="portfolio"/>
<imgsrc="images/card14.jpg"class="portfolio"/>
<imgsrc="images/card15.jpg"class="portfolio"/>
<imgsrc="images/card16.jpg"class="portfolio"/>
<imgsrc="images/card17.jpg"class="portfolio"/>
</div><br/><br/>
<h2>CalltoActionButton</h2><br/>
<p>(givebuttonssomeflair)</p>
<divid="buttons">
<ul>
<li>
<aclass="smallbuttongreen"href="https://www.nhooo.com/"target="_blank">Green</a>
<aclass="smallbuttonblue"href="https://www.nhooo.com/"target="_blank">Blue</a>
<aclass="largebuttonpink"href="https://www.nhooo.com/"target="_blank">Pink</a>
<aclass="smallbuttonorange"href="https://www.nhooo.com/"target="_blank">Orange</a>
<aclass="smallbuttonyellow"href="https://www.nhooo.com/"target="_blank">Yellow</a></li>
</ul>
</div><br/><br/>
<h2>Text</h2><br/>
<p>(havesubtleeffects)
<divid="paragraphs">
<divid="column"class="text">Loremipsumdolorsitamet,consecteturadipiscingelit.Phasellusineleifendjusto.Aeneanaporttitorenim.Sedaliquetullamcorpereuismod.Morbidapibuspretiummauris.Pellentesqueconsequatanteetmagnagravidaeleifend.Donecetloremnulla.Integerdignissimnisietlectusbibendumornarevenenatisodiovenenatis.Aliquamdignissimiaculisneque,sedaccumsanerataliquamporttitor.</div>
<divid="column"class="text">Quisquelobortis,turpisidornaremollis,diammagnasemperlibero,laciniapharetralectusnibhegetpurus.Aeneandignissimsollicitudingravida.Suspendissenonleoatnunctempuselementum.Curabiturvitaecommodolibero.Sederattortor,ornareidluctusvel,ullamcorperegetlacus.Maecenasacplaceratlectus.Sedquisnuncvitaelacusdignissiminterdum.</div>
<divid="column"class="text">Nullafacilisi.Inetantetellus,quisfeugiatante.Sedetlectusidanteviverrafringillainegetnisi.Duissitametauguelorem,quisluctuserat.Morbiseddiamidorcilaciniatinciduntvelauctorvelit.Etiampulvinarnibhegetantetinciduntrhoncus.Morbicommodoeroslobortisdolorsuscipiteleifend.Classaptenttacitisociosquadlitoratorquentperconubianostra,perinceptoshimenaeos.</div>
</div><br/><br/><br/><br/>
<divid="footer">
<h2>Links</h2><br/>
<p>Youcanfadeanythingyoulike,byjustaddingaclass-evenlinks:<ahref="https://www.nhooo.com/"title="Facebook"target="_blank"class="links">facebook</a>,<ahref="https://www.nhooo.com/"target="_blank"title="Linkedin"class="links">linkedin</a>,<ahref="https://www.nhooo.com/"title="Flavors.mePersonalPage"target="_blank"class="links">flavors.me</a></p><br/><br/>
</div>
</div>
</body>
</html>
以上就是本文的全部内容了，希望对大家熟练掌握jQuery特效能有所帮助。