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 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
原生js实现贪吃蛇游戏
Oct 26 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
react国际化react-intl的使用
May 06 Javascript
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
如何选购合适的收音机
2021/03/01 无线电
php ftp文件上传函数(基础版)
2010/06/03 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
python threading模块操作多线程介绍
2015/04/08 Python
Python编程之string相关操作实例详解
2017/07/22 Python
Python对象转换为json的方法步骤
2019/04/25 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python pip 安装与使用(安装、更新、删除)
2019/10/06 Python
python 循环数据赋值实例
2019/12/02 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
Android面试题附答案
2014/12/08 面试题
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
小学生综合素质评语
2014/04/23 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
企业宣传策划方案
2014/05/29 职场文书
关爱老人标语
2014/06/21 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
2015年外贸业务员工作总结范文
2015/05/23 职场文书
求职信如何撰写?
2019/05/22 职场文书