jquery实现聚光灯效果

更多时间：2014-7-13 类别：Web前端浏览量：1715

jquery实现聚光灯效果

jquery实现聚光灯效果

一、jquery实现聚光灯效果图

二、jquery代码

HTML 代码复制



<!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>

<li class="lamp">
    <a target="_blank" href="http://www.studyofnet.com/" class="sublight pic1"><img src="图片URL"/></a>
    <a target="_blank" href="http://www.studyofnet.com/" class="sublight pic2"><img src="图片URL"/></a>
    <a target="_blank" href="http://www.studyofnet.com/" class="sublight pic3"><img src="图片URL"/></a>
    <a target="_blank" href="http://www.studyofnet.com/" class="sublight pic4"><img src="图片URL"/></a>
    <a target="_blank" href="http://www.studyofnet.com/" class="sublight pic5"><img src="图片URL"/></a>
    <a target="_blank" href="http://www.studyofnet.com/" class="sublight pic6"><img src="图片URL"/></a>
</li>

<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 = $('<li style="cursor:pointer;top:0;left:0;position:absolute;width:'+w+'px;height:'+h+'px;filter:alpha(opacity=0);opacity: 0;background-color:#000;"></li>');
            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)"});
            }
        })

  标签：jquery

上一篇：ASP.NET实现多文件上传

下一篇：ASP.NET记录错误日志的方式有哪些

您可能感兴趣

jquery实现聚光灯效果

jquery实现聚光灯效果

热门推荐

排行榜