jQuery插件jFade實現(xiàn)鼠標經(jīng)過的圖片高亮其它變暗
更新時間：2015年03月14日 10:03:30 投稿：hebedich
本文給大家介紹的是一款重點突出的jQuery特效插件效果，使用jFade實現(xiàn)鼠標經(jīng)過的圖片高亮其它變暗，非常實用，推薦給小伙伴們參考下。
今天為大家?guī)硪豢钍髽私?jīng)過當前高亮其它變暗jQuery插件jFade,此款插件能實現(xiàn)的功能簡單而且很實用，當鼠標經(jīng)過圖片列表或是文字列表時懸停當前高亮顯示，其它圖片列表變暗突出顯示鼠標當前懸停。
復制代碼 代碼如下:
<!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>
以上就是本文的全部內(nèi)容了，希望對大家熟練掌握jQuery特效能有所幫助。
相關(guān)文章
jquery datatable后臺封裝數(shù)據(jù)示例代碼
這篇文章主要介紹了jquery datatable后臺封裝數(shù)據(jù)的示例代碼,需要的朋友可以參考下2014-08-08
EasyUi 打開對話框后控件賦值及賦值后不顯示的問題解決辦法
這篇文章主要介紹了easyUi 打開對話框后控件賦值，以及賦值后不顯示的問題解決辦法，解決方法非常簡單，只需要將賦值語句修改下就好，下面小編給大家簡單介紹下，需要的朋友參考下2017-01-01
jQuery插件zTree實現(xiàn)獲取一級節(jié)點數(shù)據(jù)的方法
這篇文章主要介紹了jQuery插件zTree實現(xiàn)獲取一級節(jié)點數(shù)據(jù)的方法,結(jié)合實例形式分析了jQuery插件zTree針對節(jié)點的遍歷與獲取操作相關(guān)技巧,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了jquery ztree實現(xiàn)樹的搜索功能，zTree是利用 JQuery 的核心代碼，實現(xiàn)一套能完成大部分常用功能的Tree插件，對ztree感興趣的小伙伴們可以參考一下2016-02-02
jQuery中RadioButtonList的功能及用法實例介紹
RadioButtonList的使用想必大家都有所解除，本文為以示例的方式為大家詳細介紹下其功能及用法，感興趣的朋友可以參考下2013-08-08
jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法
這篇文章主要介紹了jQuery基于ajax實現(xiàn)頁面加載后檢查用戶登錄狀態(tài)的方法,結(jié)合實例形式較為詳細分析了jQuery結(jié)合ajax進行表單登陸驗證操作的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-02-02
jQuery 可以拖動的div實現(xiàn)代碼 腳本之家修正版
最近研究了一下jQuery，覺得真的是一個很不錯的js庫，其他的不說，關(guān)鍵是有翔實的文檔，這點是非常關(guān)鍵的。2009-06-06
Jquery結(jié)合HTML5實現(xiàn)文件上傳
本文給大家介紹的是利用Jquery使用HTML5的FormData屬性實現(xiàn)對文件的上傳的方法和實例，非常的實用，有需要的小伙伴可以參考下。2015-06-06
jQuery發(fā)布已經(jīng)十年了，挺讓人難以置信。過去的這些年Web開發(fā)變了很多，jQuery也隨之變化著。在這個過程中，團隊一直在對確保過往代碼的兼容支持和獲取最好的Web開發(fā)實踐的現(xiàn)實之間努力著。就在2天前，jQuery發(fā)布了新的3.0最終版本2016-06-06
JQuery 應用 JQuery.groupTable.js
在以往的項目中，數(shù)據(jù)瀏覽用的都table 的形式展現(xiàn)。如下圖1， 這是一個很常見的表格。通常對分類的字段先進行排序。為了讓分類表現(xiàn)的更直觀。2010-12-12