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

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 条评论
登录 后参与评论

相关文章

来自专栏强仔仔

JQuery之内置函数响应事件

今天给大家介绍一下on函数中events的种类和用法。 具体我把它分为:键盘事件,鼠标事件,input事件,还有一个是基础事件(例如:滚动,界面大小变化等等之类...

1756
来自专栏python3

tkinter -- Scale

创建一个垂直 Scale,最大值为100,最小值为0,步距值为1。这个参数设置也就是 Scale的缺省设置了

723
来自专栏Python、Flask、Django

jQuery 学习(一)

1084
来自专栏coder修行路

初识HTML

1、    一套规则,浏览器认识的规则。 2、    在html里的注释:<--! 注释的内容   --> 3、    只能有一个html标签、head标签、b...

19610
来自专栏破晓之歌

CSS深入理解之overflow 原

如果overflow其中一个被赋值为visiable,而另一个被赋值为hidden或auto,那么这个会被重置为auto

713
来自专栏岑志军的专栏

HTML标签分类

2059
来自专栏编程

前端学习自学笔记:day01

在这里要跟大家说声抱歉,本人拖更太久啦.现在在自学前端,我每天会把自己的总结笔记发上来分享给大家,希望对大家有帮助. 在此之前先为大家显示下前端工程师的路线图:...

1825
来自专栏吴裕超

给新生成的节点(动态生成节点)绑定事件方法总结

第一种 jquery写法 $('.father').on('click',',child',function(){}) $(document).on('cli...

3306
来自专栏性能与架构

CSS选择器是如何确定优先级的?

先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

27310
来自专栏ytkah

怎样将Excel包含某字符的单元格填充颜色

  在处理数据的时候,xmyanke想将Excel中包含某字符的单元格填充蓝色,比较容易看清,弄了好一阵子都没完成,最后试用条件格式处理了一下,终于实现了。  ...

2704

扫码关注云+社区