jquery实现聚光灯效果的方法

更新时间：2015年02月06日 16:14:17 作者：whazhl

这篇文章主要介绍了jquery实现聚光灯效果的方法,可实现鼠标滑过图片时显示当前图片高亮,其他图片变暗的聚光灯效果,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jquery实现聚光灯效果的方法。分享给大家供大家参考。具体分析如下：

有时网站需要用jquery实现一种图片聚光灯特效，当鼠标滑过单组中的单个图标时，当前高亮，其它图标变暗的这种类似图片聚光灯特效。其实现原理为首先先让鼠标触及到当前图片后，让其他图片全部透明化，然后显示出当前的提示语，当鼠标移开以后隐藏当前的提示语，让所有的背景颜色的透明度变回正常。这里就来介绍如何用jquery实现聚光灯效果

jquery实现聚光灯效果图如下所示：

jquery代码

复制代码代码如下:

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery聚光灯插件制作jquery图片特效鼠标滑过图片当前图片高亮</title>

<meta name="description" content="jquery聚光灯插件制作jquery图片特效当鼠标滑过图片时当前图片高亮显示其余另外的图片变暗。" />

</head>

<body>

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

img{vertical-align:middle}

/* lamp */

.lamp{height:366px;width:960px;position:relative;margin:0 auto;}

.lamp .sublight{position:absolute;display:block;overflow:hidden;}

.lamp .pic1{top:0;left:0;width:240px;height:366px;}

.lamp .pic2{top:0;left:240px;width:480px;height:183px;}

.lamp .pic3{top:0;left:720px;width:240px;height:183px;}

.lamp .pic4{top:183px;left:240px;width:240px;height:183px;}

.lamp .pic5{top:183px;left:480px;width:240px;height:183px;}

.lamp .pic6{top:183px;left:720px;width:240px;height:183px;}

</style>

<div class="lamp">

    <a target="_blank" href="https://www.jb51.net/" class="sublight pic1"><img src="图片URL"/></a>

    <a target="_blank" href="https://www.jb51.net/" class="sublight pic2"><img src="图片URL"/></a>

    <a target="_blank" href="https://www.jb51.net/" class="sublight pic3"><img src="图片URL"/></a>

    <a target="_blank" href="https://www.jb51.net/" class="sublight pic4"><img src="图片URL"/></a>

    <a target="_blank" href="https://www.jb51.net/" class="sublight pic5"><img src="图片URL"/></a>

    <a target="_blank" href="https://www.jb51.net/" class="sublight pic6"><img src="图片URL"/></a>

</div>

<script type="text/javascript" src="jquery。js"></script>

<script type="text/javascript">

// 高亮效果

var blockHighLight = (function(window, $, undefined){

    var markers = [];

    return function(boxCls, itemCls, sizeArr){

        var box = $(boxCls);

        itemCls = itemCls || "a";

        box.find(itemCls).each(function(i){

            var self = $(this);

            var arr,w,h,marker;

            if(sizeArr !== undefined){

                arr = sizeArr[i].split(",");

                w = arr[0];

                h = arr[1];

            }else{

                w = self.find("img").attr("width");

                h = self.find("img").attr("height");

            }

            marker = $('<div style="cursor:pointer;top:0;left:0;position:absolute;width:'+w+'px;height:'+h+'px;filter:alpha(opacity=0);opacity: 0;background-color:#000;"></div>');

            self.append(marker);

            self.mouseover(function(){

                for(var i=0; i<markers.length; i++){

                    markers[i].show().css({"opacity":'0.2',"filter":"alpha(opacity=20)"});

                }

                marker.hide();

            });     

            markers.push(marker);

        });

        box.mouseout(function(){

            for(var i=0; i<markers.length; i++){

                markers[i].css({"opacity":'0',"filter":"alpha(opacity=0)"});

            }

        })

    }

})(this, $);

blockHighLight(

    ".lamp", //父元素

    ".sublight", //子元素集

    [

        '240,366', //第一张图片的宽高

        '480,183', //第二张图片的宽高

        '240,183', //第三张图片的宽高

        '240,183', //第四张图片的宽高

        '240,183', //第五张图片的宽高

        '240,183'  //第六张图片的宽高

    ]

); 

</script>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
这篇文章主要介绍了jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法,涉及jQuery表单元素获取及正则验证相关操作技巧,需要的朋友可以参考下
2017-12-12
Jquery为DIV添加click事件的简单实例
下面小编就为大家带来一篇Jquery为DIV添加click事件的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
toggle一个div显示或隐藏且可扩展成自定义下拉框
本文为大家介绍下如何让一个div显示或隐藏且可扩展成自定义下拉框，具体实现如下，感兴趣的朋友可参考下，希望对大家有所帮助
2013-09-09
jQuery 3.0 的变化及使用方法
jQuery ，是迄今为止世界上最流行的 JavaScript 库，一直是我们这些 Web 开发者的神器。自从它在 2006 年发布最初版本直到如今，已经有非常多的 Web 开发者在项目中引入了这个优秀的库来使开发工作变得更轻松
2016-02-02
认识jQuery的Promise的具体使用方法
本篇文章主要介绍了认识jQuery的Promise的具体使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
jQuery实现本地预览上传图片功能
这篇文章主要介绍了jQuery实现本地预览上传图片功能，为大家推荐了一款图片上传预览插件，感兴趣的小伙伴们可以参考一下
2016-01-01
jQuery中die()方法用法实例
这篇文章主要介绍了jQuery中die()方法用法,实例分析了die()方法的功能、定义及移除所有通过live()方法向指定元素添加的一个或多个事件处理程序的使用技巧,需要的朋友可以参考下
2015-01-01
QUnit jQuery的TDD框架
我今天只讨论基于JavaScript的TDD，可能有些公司是用C#做js单元测试的，但我不认为这是个好主意，很多js运行时的东西让js来返回会更直观，且易于维护。
2010-11-11
使用jquery解析XML示例代码
这篇文章通过示例为大家介绍了使用jquery解析XML的方法,经测试比较实用，需要的朋友可以参考下
2014-09-09
Jquery Ajax 学习实例2 向页面发出请求返回JSon格式数据
处理业务数据，产生JSon数据，供JqueryRequest.aspx调用
2010-03-03

jquery实现聚光灯效果的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具