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 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
vue组件学习教程
Sep 09 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
ES6中的类(Class)示例详解
Dec 09 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 PDO的一些认识小结
2015/01/23 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
简单实现php上传文件功能
2017/09/21 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
js获取视频时长代码
2014/04/10 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
require.js的用法详解
2015/10/20 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
详解vue axios中文文档
2017/09/12 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
微信小程序tabbar底部导航
2018/11/05 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
如何在django中运行scrapy框架
2020/04/22 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
MIS软件工程师的面试题
2016/04/22 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
公司租车协议书
2015/01/29 职场文书
教师个人总结范文
2015/02/11 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
大学生社会实践感想
2015/08/11 职场文书
Python 中面向接口编程
2022/05/20 Python