jQuery插件jFade實(shí)現(xiàn)鼠標(biāo)經(jīng)過的圖片高亮其它變暗
更新時(shí)間：2015年03月14日 10:03:30 投稿：hebedich
本文給大家介紹的是一款重點(diǎn)突出的jQuery特效插件效果，使用jFade實(shí)現(xiàn)鼠標(biāo)經(jīng)過的圖片高亮其它變暗，非常實(shí)用，推薦給小伙伴們參考下。
今天為大家?guī)硪豢钍髽?biāo)經(jīng)過當(dāng)前高亮其它變暗jQuery插件jFade,此款插件能實(shí)現(xiàn)的功能簡(jiǎn)單而且很實(shí)用，當(dāng)鼠標(biāo)經(jīng)過圖片列表或是文字列表時(shí)懸停當(dāng)前高亮顯示，其它圖片列表變暗突出顯示鼠標(biāo)當(dāng)前懸停。
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="Author" content="pakaerf">
<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='jfade.js'></script>
<link rel="stylesheet" href="main.css" type="text/css"/>
<script type="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>
<div id="wrapper">
<h1>jFade</h1>
<p>jFade is a simple jquery plug-in that lets you highlight items on your website. Not only are customizable fades possible, but easy control of surrounding elements makes your most important content stand out.</p><br />
<h2>Portfolio Gallery</h2><br />
<p>(Fade adjoining objects out)</p>
<div id="images">
<img src="images/card02.jpg" class="jfade_image"/>
<img src="images/card04.jpg" class="jfade_image"/>
<img src="images/card09.jpg" class="jfade_image"/>
<img src="images/card13.jpg" class="jfade_image"/>
<img src="images/card14.jpg" class="jfade_image"/>
<img src="images/card15.jpg" class="jfade_image"/>
<img src="images/card16.jpg" class="jfade_image"/>
<img src="images/card17.jpg" class="jfade_image"/>
</div><br /><br />
<p>To use default settings just add the function </p>
<code><script type="text/javascript"> <br />
$().ready(function() {<br />
$('.jfade_image').jfade();<br />
}); <br />
</script></code><br /><br />
<p>and add the class tag to each element:</p>
<code><img src="images/card02.jpg" class="jfade_image"/><br />
<img src="images/card04.jpg" class="jfade_image"/><br />
<img src="images/card09.jpg" class="jfade_image"/><br />
<img src="images/card13.jpg" class="jfade_image"/><br />
<img src="images/card14.jpg" class="jfade_image"/><br />
<img src="images/card15.jpg" class="jfade_image"/><br />
<img src="images/card16.jpg" class="jfade_image"/><br />
<img src="images/card17.jpg" class="jfade_image"/></code><br /><br />
<p>Custom settings are easily set and explained in the help doc</p><br /><br />
<h2>Portfolio Gallery 2</h2><br />
<p>(Fade objects in)</p>
<div id="images">
<img src="images/card02.jpg" class="portfolio"/>
<img src="images/card04.jpg" class="portfolio"/>
<img src="images/card09.jpg" class="portfolio"/>
<img src="images/card13.jpg" class="portfolio"/>
<img src="images/card14.jpg" class="portfolio"/>
<img src="images/card15.jpg" class="portfolio"/>
<img src="images/card16.jpg" class="portfolio"/>
<img src="images/card17.jpg" class="portfolio"/>
</div><br /><br />
<h2>Call to Action Button</h2><br />
<p>(give buttons some flair)</p>
<div id="buttons">
<ul>
<li>
<a class="small button green" href="http://www.dbjr.com.cn/" target="_blank" >Green </a>
<a class="small button blue" href="http://www.dbjr.com.cn/" target="_blank" >Blue </a>
<a class="large button pink" href="http://www.dbjr.com.cn/" target="_blank" >Pink </a>
<a class="small button orange" href="http://www.dbjr.com.cn/" target="_blank" >Orange </a>
<a class="small button yellow" href="http://www.dbjr.com.cn/" target="_blank" >Yellow </a></li>
</ul>
</div><br /><br />
<h2>Text</h2><br />
<p>(have subtle effects)
<div id="paragraphs">
<div id="column" class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in eleifend justo. Aenean a porttitor enim. Sed aliquet ullamcorper euismod. Morbi dapibus pretium mauris. Pellentesque consequat ante et magna gravida eleifend. Donec et lorem nulla. Integer dignissim nisi et lectus bibendum ornare venenatis odio venenatis. Aliquam dignissim iaculis neque, sed accumsan erat aliquam porttitor.</div>
<div id="column" class="text">Quisque lobortis, turpis id ornare mollis, diam magna semper libero, lacinia pharetra lectus nibh eget purus. Aenean dignissim sollicitudin gravida. Suspendisse non leo at nunc tempus elementum. Curabitur vitae commodo libero. Sed erat tortor, ornare id luctus vel, ullamcorper eget lacus. Maecenas ac placerat lectus. Sed quis nunc vitae lacus dignissim interdum. </div>
<div id="column" class="text">Nulla facilisi. In et ante tellus, quis feugiat ante. Sed et lectus id ante viverra fringilla in eget nisi. Duis sit amet augue lorem, quis luctus erat. Morbi sed diam id orci lacinia tincidunt vel auctor velit. Etiam pulvinar nibh eget ante tincidunt rhoncus. Morbi commodo eros lobortis dolor suscipit eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div>
</div><br /><br /><br /><br />
<div id="footer">
<h2>Links</h2><br />
<p>You can fade anything you like, by just adding a class - even links: <a href="http://www.dbjr.com.cn/" title="Facebook" target="_blank" class="links">facebook</a>, <a href="http://www.dbjr.com.cn/" target="_blank" title="Linkedin" class="links">linkedin</a>, <a href="http://www.dbjr.com.cn/" title="Flavors.me Personal Page" target="_blank" class="links">flavors.me</a></p> <br /><br />
</div>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容了，希望對(duì)大家熟練掌握jQuery特效能有所幫助。
相關(guān)文章
jquery datatable后臺(tái)封裝數(shù)據(jù)示例代碼
這篇文章主要介紹了jquery datatable后臺(tái)封裝數(shù)據(jù)的示例代碼,需要的朋友可以參考下2014-08-08
EasyUi 打開對(duì)話框后控件賦值及賦值后不顯示的問題解決辦法
這篇文章主要介紹了easyUi 打開對(duì)話框后控件賦值，以及賦值后不顯示的問題解決辦法，解決方法非常簡(jiǎn)單，只需要將賦值語(yǔ)句修改下就好，下面小編給大家簡(jiǎn)單介紹下，需要的朋友參考下2017-01-01
jQuery插件zTree實(shí)現(xiàn)獲取一級(jí)節(jié)點(diǎn)數(shù)據(jù)的方法
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)獲取一級(jí)節(jié)點(diǎn)數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了jQuery插件zTree針對(duì)節(jié)點(diǎn)的遍歷與獲取操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
jquery ztree實(shí)現(xiàn)樹的搜索功能
這篇文章主要為大家詳細(xì)介紹了jquery ztree實(shí)現(xiàn)樹的搜索功能，zTree是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的Tree插件，對(duì)ztree感興趣的小伙伴們可以參考一下2016-02-02
jQuery中RadioButtonList的功能及用法實(shí)例介紹
RadioButtonList的使用想必大家都有所解除，本文為以示例的方式為大家詳細(xì)介紹下其功能及用法，感興趣的朋友可以參考下2013-08-08
jQuery基于ajax實(shí)現(xiàn)頁(yè)面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)頁(yè)面加載后檢查用戶登錄狀態(tài)的方法,結(jié)合實(shí)例形式較為詳細(xì)分析了jQuery結(jié)合ajax進(jìn)行表單登陸驗(yàn)證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
jQuery 可以拖動(dòng)的div實(shí)現(xiàn)代碼 腳本之家修正版
最近研究了一下jQuery，覺得真的是一個(gè)很不錯(cuò)的js庫(kù)，其他的不說，關(guān)鍵是有翔實(shí)的文檔，這點(diǎn)是非常關(guān)鍵的。2009-06-06
Jquery結(jié)合HTML5實(shí)現(xiàn)文件上傳
本文給大家介紹的是利用Jquery使用HTML5的FormData屬性實(shí)現(xiàn)對(duì)文件的上傳的方法和實(shí)例，非常的實(shí)用，有需要的小伙伴可以參考下。2015-06-06
jQuery發(fā)布已經(jīng)十年了，挺讓人難以置信。過去的這些年Web開發(fā)變了很多，jQuery也隨之變化著。在這個(gè)過程中，團(tuán)隊(duì)一直在對(duì)確保過往代碼的兼容支持和獲取最好的Web開發(fā)實(shí)踐的現(xiàn)實(shí)之間努力著。就在2天前，jQuery發(fā)布了新的3.0最終版本2016-06-06
JQuery 應(yīng)用 JQuery.groupTable.js
在以往的項(xiàng)目中，數(shù)據(jù)瀏覽用的都table 的形式展現(xiàn)。如下圖1， 這是一個(gè)很常見的表格。通常對(duì)分類的字段先進(jìn)行排序。為了讓分類表現(xiàn)的更直觀。2010-12-12