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 相关文章推荐
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
node.js入门教程
Jun 01 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
js模拟实现烟花特效
Mar 10 Javascript
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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
理解Python中的With语句
2015/02/02 Python
老生常谈python中的重载
2018/11/11 Python
Python笔记之工厂模式
2019/11/20 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
企业总经理职责
2014/02/02 职场文书
服务质量承诺书
2014/03/27 职场文书
安全责任协议书
2014/04/21 职场文书
森林防火标语
2014/06/23 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
开学随笔
2015/08/15 职场文书
导游词之山海关
2019/12/10 职场文书
一文读懂go中semaphore(信号量)源码
2021/04/03 Golang
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
解析redis hash应用场景和常用命令
2021/08/04 Redis
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS