jquery实现聚光灯效果的方法


Posted in Javascript onFebruary 06, 2015

本文实例讲述了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://3water.com/" class="sublight pic1"><img src="图片URL"/></a>

    <a target="_blank" href="https://3water.com/" class="sublight pic2"><img src="图片URL"/></a>

    <a target="_blank" href="https://3water.com/" class="sublight pic3"><img src="图片URL"/></a>

    <a target="_blank" href="https://3water.com/" class="sublight pic4"><img src="图片URL"/></a>

    <a target="_blank" href="https://3water.com/" class="sublight pic5"><img src="图片URL"/></a>

    <a target="_blank" href="https://3water.com/" 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程序设计有所帮助。

Javascript 相关文章推荐
第六章之辅组类与响应式工具
Apr 25 Javascript
javascript 常用验证函数总结
Jun 28 Javascript
JS实现n秒后自动跳转的两种方法
Nov 30 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
canvas绘图不清晰的解决方案
Feb 28 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
js实现Select下拉框具有输入功能的方法
Feb 06 #Javascript
JQuery中serialize()用法实例分析
Feb 06 #Javascript
jQuery中on()方法用法实例详解
Feb 06 #Javascript
JS实现文字向下滚动完整实例
Feb 06 #Javascript
jquery中filter方法用法实例分析
Feb 06 #Javascript
Jquery对select的增、删、改、查操作
Feb 06 #Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 #Javascript
You might like
php getsiteurl()函数
2009/09/05 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
setAttribute 与 class冲突解决
2008/02/17 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
使用python加密自己的密码
2015/08/04 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
如何利用python发送邮件
2020/09/26 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
学生会离职感言
2014/02/11 职场文书
副董事长岗位职责
2014/04/02 职场文书
单位授权委托书范文
2014/08/02 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
工作证明格式及范本
2014/09/12 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python