专栏首页HTML5学堂前端特效开发 | JS实现聚光灯看图效果

前端特效开发 | 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),作者:HTML5学堂(码匠)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • UC浏览器皮肤的那个坑

    HTML5学堂:在之前的一款游戏开发当中,使用小米的UC浏览器查看移动端样式,出现了“不可思议”的现象。明明设置了深红色的文字,硬生生的变成了绿色,让小编大呼“...

    HTML5学堂
  • HTML5发展历程

    HTML5发展历程 HTML5学堂:HTML5应该说是一个新名词了,由最初的网页设计与制作,发展到WEB前端开发工程师,又演变出HTML5的“新名词”。那么H...

    HTML5学堂
  • 获取标签的那些事 之 动态集合

    HTML5学堂:今天的内容从一道题开始,很简单,但是,你可能会“跪”得很惨。之后我们自然要挖一挖这个坑喽~所有学过JavaScript的人都知道获取标签,但是真...

    HTML5学堂
  • py+selenium运行时报错Can not connect to the Service IEDriverServer.exe

    运行用例时,出现报错(host文件已加入127.0.0.1 localhost):

    逆向小白
  • Vue中实现文件上传

    为工具网 https://tool.misiyu.cn/qrcode 增加二维码上传识别功能。

    无道
  • 网页里如何使用js屏蔽鼠标右击事件

    在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只...

    祈澈菇凉
  • Android取得长宽的问题

    今天在重写View时遇到一个问题,在构造函数中使用getWidth()时为0,而在onDraw函数中却可以取到值。一番搜索后终于知道了原因:

    提莫队长
  • 论文想法跟别人撞车了,我还要不要继续?

    最近,一位硕士研究生在 reddit 上发帖提问:论文想法撞车之后到底要不要放弃?以下是原帖摘要:

    机器之心
  • 2016 机器学习之路:一年从无到有掌握机器学习

    【新智元导读】程序员 Per Harald Borgen 在 Medium 刊文,介绍了他在一年的时间里,从入门到掌握机器学习的历程。Borgen 表示,即使没...

    新智元
  • 微信提现免费!申请微信免费提现的教程

    今天,微信突然宣布:微信提现免费,不过,要享受微信提现免费的功能,需要满足一些条件,比如:需要申请具有微信免费提现的收款二维码,通过普通的微信收款码收款之后,提...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券