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 相关文章推荐
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
一道JS前端闭包面试题解析
Dec 25 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 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
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
jQuery判断对象是否存在的方法
2015/02/05 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
Python迭代用法实例教程
2014/09/08 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
关于python写入文件自动换行的问题
2018/06/23 Python
python多进程读图提取特征存npy
2019/05/21 Python
Python如何对齐字符串
2020/07/30 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
求职者简历中的自我评价
2013/10/20 职场文书
高一政治教学反思
2014/01/28 职场文书
学生思想表现的评语
2014/01/30 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
骨干教师个人总结
2015/02/11 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书