前端特效开发 | 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 条评论
登录 后参与评论

相关文章

来自专栏施炯的IoT开发专栏

美化Windows Mobile上的自定义ListView

    在移动设备上,我们经常需要列出数据给用户看,ListView是经常用到的控件。而有些时候,我们需要同时列出预览的图片和数据,所谓图文并茂,这样可以带来更...

1996
来自专栏娱乐心理测试

Ios常用第三方框架(一)

3253
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

1.1K6
来自专栏吴小龙同學

Android 8.0 自适应图标

79910
来自专栏IMWeb前端团队

搞定这些疑难杂症,向css3动画说yes

本文篇幅比较长,涉及到的知识点也比较多,如3d,动画性能,动画js事件等,参考文献及demo展示也比较多,所以建议pc阅读效果更佳。 动画库 到现在来说css3...

3078
来自专栏Python爬虫实战

数字华容道03:首页创建

整个布局采用 QVBoxLayout (竖型布局)。最上方的“数字华容道”字样是一张图片,采用QLabel进行展示。下面几个选择难度的按钮和排行榜按钮采用 QP...

1022
来自专栏java一日一条

前端高性能滚动 scroll 及页面渲染优化

最近在研究页面渲染及web动画的性能问题,以及拜读《CSS SECRET》(CSS揭秘)这本大作。

3323
来自专栏练小习的专栏

表格边框你知多少

table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己意...

2306
来自专栏Coco的专栏

【前端性能】高性能滚动 scroll 及页面渲染优化

3207
来自专栏Material Design组件

Human Interface Guidelines —— Page Controls

1315

扫码关注云+社区

领取腾讯云代金券