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

相关文章

来自专栏ThoughtWorks

前端页面替换文本的方法和一些小技巧

在前端页面替换文本有几种做法,不假思索的答案通常是直接用JavaScript。但你有没有想过这完全可以用CSS实现呢? 背景 在前端页面上,有的时候我们需要...

3387
来自专栏软件开发

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

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

6526
来自专栏java一日一条

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

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

1963
来自专栏Nian糕的私人厨房

JavaScript 鼠标悬停图片,显示隐藏文本

当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间

1004
来自专栏Coding+

制作一个标准 ICO 图标

ICO是Windows的图标文件格式,此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透...

3892
来自专栏前端知识分享

第10天:CSS初始化操作

       在写页面过程中,每个浏览器都会有默认样式,为了避免浏览器的样式兼容问题,我们会在样式开始部分对常用标签进行重置样式。这样我们在写样式时,就不会有误...

1172
来自专栏IMWeb前端团队

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

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

2658
来自专栏iOSDevLog

sketch入门第1部分:画板和形状Sketch使产品设计变得非常简单。准备好了吗?转到第2部分

今年,我在旧金山举行的大会上担任用户体验设计课程的助教。我在互联网上搜索了绝对初学者的素描教程,但是没有提到任何覆盖所有基础知识而没有提到Photoshop。所...

1272
来自专栏Guangdong Qi

iOS开发常用之UI下拉刷新

2661
来自专栏人云亦云

网页中内嵌字体

4056

扫码关注云+社区