jQuery插件jFade实现鼠标经过的图片高亮其它变暗
更新时间：2015年03月14日 10:03:30 投稿：hebedich
本文给大家介绍的是一款重点突出的jQuery特效插件效果，使用jFade实现鼠标经过的图片高亮其它变暗，非常实用，推荐给小伙伴们参考下。
今天为大家带来一款鼠标经过当前高亮其它变暗jQuery插件jFade,此款插件能实现的功能简单而且很实用，当鼠标经过图片列表或是文字列表时悬停当前高亮显示，其它图片列表变暗突出显示鼠标当前悬停。
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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="https://www.jb51.net/" target="_blank" >Green </a>
<a class="small button blue" href="https://www.jb51.net/" target="_blank" >Blue </a>
<a class="large button pink" href="https://www.jb51.net/" target="_blank" >Pink </a>
<a class="small button orange" href="https://www.jb51.net/" target="_blank" >Orange </a>
<a class="small button yellow" href="https://www.jb51.net/" 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="https://www.jb51.net/" title="Facebook" target="_blank" class="links">facebook</a>, <a href="https://www.jb51.net/" target="_blank" title="Linkedin" class="links">linkedin</a>, <a href="https://www.jb51.net/" title="Flavors.me Personal Page" target="_blank" class="links">flavors.me</a></p> <br /><br />
</div>
</div>
</body>
</html>
以上就是本文的全部内容了，希望对大家熟练掌握jQuery特效能有所帮助。
相关文章
最近的项目中开始使用了新版本的jquery，就是1.3.2版，发现在这个在版本对就radio类型的input在IE8中的支持不太好2009-07-07
这篇文章主要介绍了jquery实现ajax加载超时提示的方法,涉及jQuery中load方法的ajax加载超时设置与提示信息处理技巧,需要的朋友可以参考下2016-07-07
这篇文章主要为大家详细介绍了基于jquery实现左右无缝轮播图的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
下面小编就为大家带来一篇jquery中取消和绑定hover事件的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了jquery密码强度校验，这是一个非常常见的功能，在输入密码的时候提示密码的强度，本文使用jQuery来实现，有需要的小伙伴可以参考下。2015-12-12
项目需要用到树形下拉框，采用了zTree来实现，因为代码的移植性比较高，下面是实现的代码2014-05-05
说到模拟SELECT框，想必大家第一想到的就是使用javascript吧，其实是jquery也是可以做到的，下面有个不错的示例，感兴趣的朋友可以参考下2013-10-10
下面小编就为大家分享一篇jquery radio 动态控制选中失效问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
这篇文章主要介绍了jQuery+datatables插件实现ajax加载数据与增删改查功能,涉及jQuery结合datatables插件针对页面表格实现数据加载及增删改查等相关操作技巧,需要的朋友可以参考下2018-04-04
jQuery1.7中 .delegate()已被.on()取代，下面以示例的方式为大家介绍下jQuery中delegate与on的用法与区别，感兴趣的朋友可以参考下2013-12-12
最新评论