jQuery插件jFade实现鼠标经过的图片高亮其它变暗


Posted in Javascript onMarch 14, 2015

今天为大家带来一款鼠标经过当前高亮其它变暗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://3water.com/" target="_blank" >Green </a>

                <a class="small button blue" href="https://3water.com/" target="_blank" >Blue </a>

                <a class="large button pink" href="https://3water.com/" target="_blank" >Pink </a>

                <a class="small button orange" href="https://3water.com/" target="_blank" >Orange </a>

                <a class="small button yellow" href="https://3water.com/" 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://3water.com/" title="Facebook" target="_blank" class="links">facebook</a>, <a href="https://3water.com/" target="_blank" title="Linkedin" class="links">linkedin</a>, <a href="https://3water.com/" title="Flavors.me Personal Page" target="_blank" class="links">flavors.me</a></p> <br /><br />

        </div>

    </div>

</body> 

</html>

以上就是本文的全部内容了,希望对大家熟练掌握jQuery特效能有所帮助。

Javascript 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
js实现无缝滚动特效
Dec 20 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 #Javascript
javascript实现数独解法
Mar 14 #Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 #Javascript
纯javascript实现简单下拉刷新功能
Mar 13 #Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 #Javascript
node.js [superAgent] 请求使用示例
Mar 13 #Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 #Javascript
You might like
MySQL授权问题总结
2007/05/06 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
jquery JSON的解析方式
2009/07/25 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
Python 初始化多维数组代码
2008/09/06 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
Python循环结构的应用场景详解
2019/07/11 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
AJax面试题
2014/11/25 面试题
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
供货协议书范本
2014/04/22 职场文书
医院领导班子整改方案
2014/10/01 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
关于迟到的检讨书
2015/05/06 职场文书
阿甘正传观后感
2015/06/01 职场文书