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 相关文章推荐
JavaScript类和继承 prototype属性
Sep 03 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
javascript实现点击星星小游戏
Dec 24 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
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
js获取内联样式的方法
2015/01/27 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
python实现简单遗传算法
2020/09/18 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
服务承诺口号
2014/05/22 职场文书
禁毒宣传标语
2014/06/19 职场文书
不错的求职信范文
2014/07/20 职场文书
人事文员岗位职责
2015/02/04 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
离婚民事起诉状
2015/08/03 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python