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调用XML制作连动下拉列表框
Jun 25 Javascript
捕获关闭窗口的脚本
Jan 10 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
Script的加载方法小结
Jan 12 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
html向js方法传递参数具体实现
Aug 08 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
详解Vue的异步更新实现原理
Dec 22 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 PDO函数库详解
2010/04/27 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
Python 字典与字符串的互转实例
2017/01/13 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python中Unittest框架的具体使用
2019/08/27 Python
浅析使用Python搭建http服务器
2019/10/27 Python
python文件操作的简单方法总结
2019/11/07 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
html5 学习简单的拾色器
2010/09/03 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
学前教育求职自荐信范文
2013/12/25 职场文书
行政部主管岗位职责
2013/12/28 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
技术员岗位职责范本
2015/04/11 职场文书
教师师德承诺书2016
2016/03/25 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
sql server删除前1000行数据的方法实例
2021/08/30 SQL Server
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记