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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
json的使用小结
Jun 08 Javascript
最佳的JavaScript错误处理实践
Jul 16 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
详解TypeScript的基础类型
Feb 18 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP echo()函数讲解
2019/02/15 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
PHP时间类完整代码实例
2021/02/26 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
jQuery easyui datagird编辑行删除行功能的实现代码
2018/09/20 jQuery
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
Python之str操作方法(详解)
2017/06/19 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
国庆节慰问信
2015/02/15 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL
解决Python字典查找报Keyerror的问题
2021/05/26 Python