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="http://www.jb51.net/" target="_blank" >Green </a>
                <a class="small button blue" href="http://www.jb51.net/" target="_blank" >Blue </a>
                <a class="large button pink" href="http://www.jb51.net/" target="_blank" >Pink </a>
                <a class="small button orange" href="http://www.jb51.net/" target="_blank" >Orange </a>
                <a class="small button yellow" href="http://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="http://www.jb51.net/" title="Facebook" target="_blank" class="links">facebook</a>, <a href="http://www.jb51.net/" target="_blank" title="Linkedin" class="links">linkedin</a>, <a href="http://www.jb51.net/" title="Flavors.me Personal Page" target="_blank" class="links">flavors.me</a></p> <br /><br />
        </div>
    </div>
</body>
</html>

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

赞 (0)

相关推荐

  • jQuery实现点击弹出背景变暗遮罩效果实例代码

    jQuery实现点击弹出背景变暗遮罩效果实例代码

    本文是小编实现的一个简单的jquery点击弹出背景变暗遮罩效果,并且点击空白处隐藏弹出层的效果,效果非常棒,小编只给大家贴出了关键代码了,大家可以根据个人需要适当的添加内容. js代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".tkyy").click(function(event){ event.stopPropagation(); //停止事件冒泡 $(&

  • jQuery实现鼠标滑过遮罩并高亮显示效果

    jQuery实现鼠标滑过遮罩并高亮显示效果

    复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标滑过遮罩高亮效果</title> <style> *{padding:0;margin:0;} ul,li

  • jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

    jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

    本文实例讲述了jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="c

  • jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码

    本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法.分享给大家供大家参考,具体如下: 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

  • jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色

    js代码:  css代码: 复制代码 代码如下: tr.alt td { background:#ecf6fc; /*这行将给所有的tr加上背景色*/ } tr.over td { background:#bcd4ec; /*这个将是鼠标高亮行的背景色*/ }

  • jQuery实现鼠标经过图片变亮其他变暗效果

    以下是完整源代码: <!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=&quo

  • jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法

    jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法

    本文实例讲述了jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法.分享给大家供大家参考.具体如下: 鼠标滑向当前图片高亮显示,其它图片变灰 这个 网页特效一些商城经常用到比如淘宝,当用户鼠标移到某一个图片时候变亮 周围图片变灰,形成对比增加用户体验 这个jquery特效的原理是:鼠标滑过当前元素,找到他的同辈元素i,并为它加上opacity_bg类,鼠标移出当前元素,到他的同辈元素i,并移除它加上opacity_bg类景 核心js代码如下: $(document).ready(fun

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

    今天为大家带来一款鼠标经过当前高亮其它变暗jQuery插件jFade,此款插件能实现的功能简单而且很实用,当鼠标经过图片列表或是文字列表时悬停当前高亮显示,其它图片列表变暗突出显示鼠标当前悬停. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）

    ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件.通过ImageDrawer.js插件,你可以制作在页面中绘制图片的动态过程,你可以控制绘制动画的持续时间等参数,非常有趣. 效果展示       源码下载 使用方法 使用该动态绘制图片插件需要在页面中引入imagedrawer.css,jquery和imagedrawer.js文件. <link rel="stylesheet" href="css/imagedrawer.css"

  • jQuery插件实现带圆点的焦点图片轮播切换

    这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <base target="_blank" /> <

  • jQuery插件uploadify实现ajax效果的图片上传

    昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手. 首先我们先参考别人的资料(我自己整理了一下) 可选项 需要参数类型 参数名字 解释 (布尔型) auto 当文件被添加到队列时,自动上传. (字符串) buttonImg 浏览按钮的背景图片路径. (字符串) buttonText 默认在按钮上显示的文本. (字符串) cancelImg 取消按钮的背景图片路径. (字符串) check

  • 使用JS实现鼠标放上图片进行放大离开实现缩小功能

    使用JS实现鼠标放上图片进行放大离开实现缩小功能,具体代码如下所示: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id= 'div_jpg' style="width: 200px;height: 200px;"> <img src="./128206.jpg" id="

  • 2012年开发人员的16款新鲜的jquery插件体验分享

    2012年开发人员的16款新鲜的jquery插件体验分享

    jQuery的是一个多浏览器的Javascript集合,以轻松地简化了客户端脚本的HTML.jQuery的格式设计帮助你获得一个文件,选择DOM元素,动画,处理事件,并开发Ajax程序设计人员能够根据需要创建一些高级别的jquery插件.使用这些插件方法可以创建高效强大的网页和Web程序. 保持学习最新的jQuery插件有时似乎是一个完整的工作.每隔一天,我们似乎可以发现一些新的东西,尖端的东西,有时我们发现的东西,是真正的创新和必要的对于我们的工作来说.下面是从2012年开始的新的和令人兴奋的

  • jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)

    本文实例讲述了jQuery实现滚动鼠标放大缩小图片的方法.分享给大家供大家参考,具体如下: 在项目制作过程中,遇到了这么一个需求,就开发了一个,记录一下. 首先,需要定义html元素和css样式: <div style="position:relative;"> <asp:Image ID="myImg" runat="server" Width="670px" /> <span style=&q

  • jQuery实现鼠标滑过图片移动特效

    jQuery实现鼠标滑过图片移动特效

    在网页应用中,鼠标操作是最为常见和频繁的操作,在用户移动鼠标浏览页面的时候,一些交互特效的提醒会增强用户体验度,也可让用户感觉页面在和他"交流",从而增加用户在页面的逗留时间,以及增加深层次访问的可能性. 今天tity带大家做一个简单的示例,当鼠标移动到图片上的时候图片会向上动一下,等到鼠标离开后,图片又返回到原来的位置. 首先,我们先来做如下图所示的页面布局: 页面布局部分: <ul> <li><img src="images/1.jpg&qu

  • jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】

    本文实例讲述了jQuery实现响应鼠标事件的图片透明效果.分享给大家供大家参考,具体如下: 实现的思想: 1.当鼠标放在图片上面的时候触发mouseover mouseenter两个事件(图片变得透明) 2.当鼠标离开图片的时候触发mouseleave mouseout两个事件(图片变为不透明) 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

  • 14款经典网页图片和文字特效的jQuery插件-前端开发必备

    14款经典网页图片和文字特效的jQuery插件-前端开发必备

    不废话了,直接贴图片了,亲们可以点击查看演示和下载源码哦. 经典1.网页图片3d旋转jQuery代码 查看演示  下载插件 经典2.存css3实现的tabl选项卡代码 查看演示 下载插件 经典3.jQuery标签旋转代码 查看演示  下载插件 经典4.鼠标悬浮的图片选项卡代码 查看演示  下载插件 经典5.鼠标往下滚动时文字变大的css3代码 查看演示  下载插件 经典6.动画标签云网页代码 查看演示  下载插件 经典7.css3文字晃动代码 查看演示  下载插件 经典8.css3幻灯片代码 查

随机推荐