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 Date自定义函数 延迟脚本执行
Mar 10 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
JavaScript与Java正则表达式写法的区别介绍
Aug 15 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
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
php curl 上传文件代码实例
2015/04/27 PHP
利用php输出不同的心形图案
2016/04/22 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
JavaScript基础语法让人疑惑的地方小结
2012/05/23 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
python:socket传输大文件示例
2017/01/18 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
Python集合操作方法详解
2020/02/09 Python
python如何爬取动态网站
2020/09/09 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
美国在线珠宝商店:SZUL
2017/02/11 全球购物
中海讯通笔试题
2015/09/15 面试题
Delphi软件工程师试题
2013/01/29 面试题
2014年业务工作总结
2014/11/17 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
写给医生的感谢信
2015/01/22 职场文书
苏州园林导游词
2015/02/03 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
教你用eclipse连接mysql数据库
2021/04/22 MySQL