前端特效开发 | 图片翻转的制作

HTML5学堂(码匠):在前端开发中,针对效果层面的开发,使用原生JS往往会因其冗长的代码严重影响到开发进度。比如一个简单的图片翻转效果,我们能否考虑借助某些简单方便的操作来替代原生JS的使用呢?

本文主要内容

1. 效果展示

2. 实现的原理分析

3. 案例实现

1. 效果展示

如上效果,当用户将鼠标移入到每一张图片上,当前的图片会有一个翻转消失的效果,同时有一个图片描述信息的面板会翻转出现。而当鼠标移出图片时,原有的图片会翻转出现,面板信息会翻转消失。针对这样一个简单的效果描述,大家有没有自己的实现方法?

2. 实现的原理分析

2.1 结构与样式分析

由于需要的功能是随着鼠标移入图片与信息都需要翻转,所以在同一个位置要存在两个标签并发生相应的变化,可以考虑使用定位来实现。

在本文中,采用的是图片img与信息em都参照外层a标签的定位方式,然后再进行相应的样式变化。

2.2 基本功能逻辑

首先使用JS实现动态添加翻转后展示的信息面板;

然后借助jQuery的hover方法,实现鼠标移入移出的功能;

最后针对不同的翻转变化,让图片与信息面板发生相反的效果展示。

3. 案例实现

3.1 添加面板信息

在鼠标移入相应的图片时,需要让图片可以翻转消失,同时有一个信息面板可以翻转出现。

但是在结构的书写中并没有提供面板信息的标签,所以就需要使用JS动态的添加了一个em标签,借助append方法把相应的标签添加到了对应的img标签的后面。如下图所示:

除了添加标签以外,还把当前图片的alt属性中替代性文本填充成了标签的内容,其范例代码:

// 对每个a标签内部动态添加一个em标签,并使其内容为img的alt属性内容

label.find('.brand a').each(function() {
    $(this).append('<em>' + $(this).find('img').attr('alt') + '</em>');
});

3.2 实现图片的翻转

实现图片的翻转是借助了jQuery中的hover方法,此方法携带了两个函数,写法如下:

label.find('.brand a').hover(function() {}, function() {});

其中第一个函数表示的是鼠标移入发生的事情;第二个函数表示的是鼠标移出发生的事情。

图片的翻转主要就是在第一个函数中进行书写,通过对外层的a标签绑定hover事件,然后变化其内部img的高度值与定位值,同时使用动画方式show()使得img后面的em标签出现。

代码范例如下:

// 鼠标移入img标签动画变小
$(this).find('img').stop().animate({
    'height': 0,
    'top': '35px'
}, 200, function() {
    // em标签出现
    $(this).hide().next().show();
    // em标签动画变大
    $(this).next().animate({
        'height': '70px',
        'top': 0
    }, 200);
});

3.3 实现信息面板的翻转

实现信息面板的翻转出现主要是hover事件中第二个函数的功能,该函数主要处理的是让鼠标在移出时,em标签变小,原来的img标签要恢复到原本的初始状态。

相应代码如下:

// 鼠标移出em标签动画变小
$(this).find('em').animate({
    'height': 0,
    'top': '35px'
}, 200, function() {
    // img标签出现
    $(this).hide().prev().show();
    // img动画变大
    $(this).prev().animate({
        'height': '70px',
        'top': '0'
    }, 200);
});

3.4 成品代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jquery hover鼠标悬停图片旋转动画展示</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <style type="text/css">
    .allbrand .brand {
        overflow: hidden;
        width: 390px;
        height: 225px;
        margin: 40px auto 0;
    }
    .allbrand .brand a {
        position: relative;
        float: left;
        width: 120px;
        height: 70px;
        margin: 0 6px 5px 0;
        color: #fff;
        font-size: 14px;
        line-height: 70px;
        text-align: center;
    }
    .allbrand .brand a img {
        position: absolute;
        left: 10px;
        width: 118px;
        height: 68px;
        border: 1px solid #e9e8e8;
    }
    .allbrand .brand a em {
        overflow: hidden;
        display: none;
        position: absolute;
        top: 36px;
        left: 10px;
        width: 118px;
        height: 0;
        border: 1px solid #e9e8e8;
        background: #999;
        opacity: 0.5;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <div class="allbrand">
        <div class="brand">
            <a href=""><img alt="兔子" src="http://img.h5course.cn/codepen/2017.01.05.01.jpg" /></a>
            <a href=""><img alt="鹦鹉" src="http://img.h5course.cn/codepen/2017.01.05.02.jpg" /></a>
            <a href=""><img alt="萌熊" src="http://img.h5course.cn/codepen/2017.01.05.03.jpg" /></a>
            <a href=""><img alt="蝴蝶" src="http://img.h5course.cn/codepen/2017.01.05.04.jpg" /></a>
            <a href=""><img alt="HTML5学堂(码匠)" src="http://img.h5course.cn/codepen/2017.01.05.05.jpg" /></a>
            <a href=""><img alt="狗狗" src="http://img.h5course.cn/codepen/2017.01.05.06.jpg" /></a>
            <a href=""><img alt="树蛙" src="http://img.h5course.cn/codepen/2017.01.05.07.jpg" /></a>
            <a href=""><img alt="蜂鸟" src="http://img.h5course.cn/codepen/2017.01.05.08.jpg" /></a>
            <a href=""><img alt="灰鸭子" src="http://img.h5course.cn/codepen/2017.01.05.09.jpg" /></a>
        </div>
    </div>
    <script type="text/javascript">
        //翻转
        function brandAnimate(label) {
            if(label.find('.brand em').length != 0) {
                return false;
            }
            // 对每个a标签内部动态添加一个em标签,并使其内容为img的alt属性内容
            label.find('.brand a').each(function() {
                $(this).append('<em>' + $(this).find('img').attr('alt') + '</em>');
            });
            label.find('.brand a').hover(function() {
                // 鼠标移入img标签动画变小
                $(this).find('img').stop().animate({
                    'height': 0,
                    'top': '35px'
                }, 200, function() {
                    // em标签出现
                    $(this).hide().next().show();
                    // em标签动画变大
                    $(this).next().animate({
                        'height': '70px',
                        'top': 0
                    }, 200);
                });
            }, function() {
                // 鼠标移出em标签动画变小
                $(this).find('em').animate({
                    'height': 0,
                    'top': '35px'
                }, 200, function() {
                    // img标签出现
                    $(this).hide().prev().show();
                    // img动画变大
                    $(this).prev().animate({
                        'height': '70px',
                        'top': '0'
                    }, 200);
                });
            });
        }
        brandAnimate($('.allbrand'));
    </script>
</body>
</html>

总结

图片翻转效果使用jQuery的hover方法即可简单的实现出来。当然除此之外,也还可以借助CSS3的一些方法来进行实现,大家在学习完此方法之后不妨也去使用CSS3试试。

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知道一点点

【原创】bootstrap框架的学习 第七课 -[bootstrap表格]

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的表格</title> <link hr...

562
来自专栏python成长之路

Pygame常用方法

2005
来自专栏lzj_learn_note

前端开发学习──CSS(1)

HTML 标签原本被设计为用于定义文档内容,但随着HTML的 发展,为了满足页面设计的更多要求,HTML增加了许多的显示功能,导致HTML变得越来越杂乱,页面也...

661
来自专栏十月梦想

背景属性

583
来自专栏分享达人秀

新推出的GridLayout网格布局

本期主要学习的是网格布局是Android 4.0新增的布局,和前面所学的TableLayout表格布局 有点类似,不过他有很多前者没有的东西,也更加好用...

2038
来自专栏Android先生

Android开发人员初识前端

<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更...

933
来自专栏姬小光

小鸡君の前端小姜汤【第014期】- 内联样式

在第003期我们讲过一点所谓样式,当时举的栗子是行内样式,只能写在元素的标签上,作为 style 属性的值存在的。这一期我们学习内联样式,或叫嵌入样式。

603
来自专栏用户2442861的专栏

css display table-cell

display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。

81
来自专栏GreenLeaves

JavaScript之Style属性学习

当CSS使用伪类开始侵入DOM和JavaSCript所控制着的行为层时,DOM和JavaScript也使用他们的一系列样式去控制表现层,这篇随笔主要说的就是利用...

1928
来自专栏九彩拼盘的叨叨叨

学习纲要:DOM

752

扫描关注云+社区