前端特效开发 | JS实现聚光灯看图效果

HTML5学堂(码匠):昏暗的场景下,查看任何的图片、效果都会给人不适的感觉,所以人们往往喜欢在明亮的场景中来体验世界的美好。 对于前端开发来说,想要让用户能在更明亮的状态下查看各种图片,那就必须为页面增加上一个“镁光灯”。

本文主要内容

1. 效果展示

2. 实现的原理分析

3. 案例实现

1. 效果展示

如上的效果中,可以实现对查看的图片实现聚光效果。当用户的鼠标移入到某一张图片时,“镁光灯”即聚焦在当前的图片上,这张图片就高亮的展示出来,同时为了更突出所选的这张图片,就把没有被选择到的其它图片添加阴影透明。上图的效果结合相关的描述,大家对此效果的实现有没有一点自己的思路或者方法呢?

2. 实现的原理分析

2.1 结构与样式搭建

为了实现图片的的聚光效果,使用了ul>li来嵌套图片的结构,并且采用的是浮动布局,让多个列表项并排在一起;然后为页面的body增加黑色的背景,以期来增加聚光时的高亮状态;同时为了让鼠标移入时有更好的展示状态,在hover时特地为图片增加一个白色的边框,以区分当前展示的图片区域。

2.2 功能逻辑分析

首先动态的获取了当前每张图片的大小,并设定一个透明度变量;

然后借助JQ的hover()方法,实现鼠标移入移出的图片展示;

最后当用户的鼠标移开了无序列表时,还原当前图片的不透明状态。

3. 案例实现

3.1 获取当前图片大小

借助JQ的find方法找到图片img,获取其宽高大小与设定的透明值一起存放在对象中,以便后期使用的时候可以直接拿取。

之后借助样式设置方法.css(),为列表项的每个列表设置当前图片的大小,使用对象.属性的方式取得前面对象中存储的值。具体代码如下所示:

var spotlight = {
    opacity : 0.2,
    // 下面是为图像的宽度和高度,可以做相同大小
    imgWidth : $('.spotlight ul li').find('img').width(),
    imgHeight : $('.spotlight ul li').find('img').height()
};
// 将列表项的宽度和高度设置为与图像相同
$('.spotlight ul li').css({
    'width': spotlight.imgWidth,
    'height': spotlight.imgHeight
});

3.2 实现图片的聚光效果

实现聚光灯效果,主要需要考虑两个方面,一个是鼠标移入时对选中的图片进行高亮展示,同时对其它未选中的设置前面对象中设置好的透明度值;另一方面需要考虑的是当鼠标移开图片时,需要移除高亮显示,并且回归原来的初始状态。

针对如上的说法,特地在CSS样式中封装了一个叫做active的类名,其中主要设置的是鼠标移入后会展示的状态,所以在书写上只需要借助添加或者移除类名即可操作。具体如下所示:

// 当鼠标悬停在列表项上时...
$('.spotlight ul li').hover(function(){
    //...找到它里面的图像,并添加活动类,并更改不透明度为1(无透明度)
    $(this).find('img').addClass('active').css({
        'opacity' : 1
    });
    // 获取其他列表项,并更改其中的图像的不透明度为我们在Spotlight对象中设置的一个
    $(this).siblings('li').find('img').css({
        'opacity': spotlight.opacity
    }) ;
    //当鼠标离开...
}, function(){
    // 找到刚刚离开的列表项中的图像,并删除活动类
    $(this).find('img').removeClass('active');
});

3.3 还原初始状态

还原初始状态主要是发生在鼠标彻底的移开图片区域的时候,这时只需要为最外层的无序列表绑定鼠标移开事件—mouseleave,然后在里面设置所有的图片都不透明度即可,如下操作:

// 当鼠标离开无序列表时...
$('.spotlight ul').on('mouseleave',function(){
    // 找到图像并将不透明度更改为1(完全可见)
    $(this).find('img').css('opacity', 1);
});

3.4 成品代码

<!DOCTYPE htm>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery图片聚光灯</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style type="text/css">
        body {
            background: black;
        }
        .spotlight {
            width: 600px;
            margin: 0 auto;
            padding-top: 100px;
        }
        .spotlight ul li {
            float: left;
            position: relative;
        }
        .spotlight ul li a img {
            position: relative;
            width: 200px;
            height: 120px;
            border: none;
        }
        .spotlight ul li a img.active {
            left: -4px;
            top: -4px;
            border: 4px solid white;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class='spotlight'>
        <ul class="clearfix">
            <li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.01.jpg' /></a></li>
            <li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.02.jpg' /></a></li>
            <li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.03.jpg' /></a></li>
            <li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.04.jpg' /></a></li>
            <li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.05.jpg' /></a></li>
            <li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.06.jpg' /></a></li>
            <li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.07.jpg' /></a></li>
            <li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.08.jpg' /></a></li>
            <li><a href=""><img src='http://img.h5course.cn/codepen/2017.01.12.09.jpg' /></a></li>
        </ul>
    </div>
    <script type="text/javascript">
        var spotlight = {
            opacity : 0.2,
            // 下面是为图像的宽度和高度,可以做相同大小
            imgWidth : $('.spotlight ul li').find('img').width(),
            imgHeight : $('.spotlight ul li').find('img').height()
        };
        // 将列表项的宽度和高度设置为与图像相同
        $('.spotlight ul li').css({
            'width': spotlight.imgWidth,
            'height': spotlight.imgHeight
        });
        // 当鼠标悬停在列表项上时...
        $('.spotlight ul li').hover(function(){
            //...找到它里面的图像,并添加活动类,并更改不透明度为1(无透明度)
            $(this).find('img').addClass('active').css({
                'opacity' : 1
            });
            // 获取其他列表项,并更改其中的图像的不透明度为我们在Spotlight对象中设置的一个
            $(this).siblings('li').find('img').css({
                'opacity': spotlight.opacity
            }) ;
            //当鼠标离开...
        }, function(){
            // 找到刚刚离开的列表项中的图像,并删除活动类
            $(this).find('img').removeClass('active');
        });
        // 当鼠标离开无序列表时...
        $('.spotlight ul').on('mouseleave',function(){
            // 找到图像并将不透明度更改为1(完全可见)
            $(this).find('img').css('opacity', 1);
        });
    </script>
</body>
</html>

总结

一个简单的聚光灯效果,只是为了用户在查看一些相关的内容时可以获得更好的突出展示效果,这样可以进一步的提升用户的体验性。除此之外,使用JQ的快速开发也为当前的效果层面提升了很大的方便,后期我们仍然还会为大家带来更多具有实战意义的效果,尽请关注哦~~~

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2017-01-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏散尽浮华

Linux下的计算命令和求和、求平均值、求最值命令梳理

在Linux系统下,经常会有一些计算需求,那么下面就简单梳理下几个常用到的计算命令 (1)bc命令 bc命令是一种支持任意精度的交互执行的计算器语言。bash内...

2197
来自专栏数据小魔方

条件格式小技巧——图表集!

今天跟大家分享条件格式的另一个贴心小技巧——图表集! ▽▼▽ 也许大家用的不多,不过这个小技巧之所以要跟大家分享,是因为它采用的迷你小图标的形式,非常细致的刻画...

3115
来自专栏知晓程序

开发 | 傻瓜式操作带你初始化「跳一跳」游戏场景

在上一篇教程里,知晓程序为大家详细讲解了如何创建小游戏「跳一跳」的游戏场景。通过介绍,大家一定对于小游戏的开发有了更进一步的认识。

1273
来自专栏大数据智能实战

tensorflow.models.rnn.rnn_cell.linear在tensorflow1.0版本之后找不到(附tensorflow1.0 API新变化)

由于版本更新关系,从原来的tensorflow低版本到升级到tensorflow1.0以上时,发现有很多API函数变化是很正常的事情,大多碰到的如: 如其中tf...

2547
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

1、H5页面(APP端)      1.1     APP端页面用HTML5制作,头部需要加适配信息:   <meta http-equiv="Content-...

2699
来自专栏葡萄城控件技术团队

Web页面中5种超酷的Hover效果

想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点。 给平淡的站点带来...

1929
来自专栏葡萄城控件技术团队

Spread for Windows Forms高级主题(6)---数据绑定管理

自定义列和区域的数据绑定 当表单被绑定到一个数据集时,表单中的列就会相继的被分配到数据集的区域上。例如,第一个数据域分配给列A,第二个数据区域分配给列B,等等。...

18110
来自专栏Crossin的编程教室

【Python 第28课】 字符串的分割

字符串和list之间有很多不得不说的事。比如有同学想要用python去自动抓取某个网页上的下载链接,那就需要对网页的代码进行处理。处理的过程中,免不了要在字符串...

3044
来自专栏web前端

制作H5响应式页面注意事项、微信二次分享

          1.2.1     重要的图片用img标签(例如头部banner等包含特定信息的内容图片),不重要的底板用背景形式显示,例如底部背景

1230
来自专栏Y大宽

RNA-seq分析简洁版

Tumor:SRR316214,SRR316215 Adjacent Normal Liver:SRR316212,SRR316213

1052

扫码关注云+社区