基于jQuery HTML5人物介绍卡片特效。这是一款基于jquery.material-cards插件实现的人物介绍卡片形式特效代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <div class="htmleaf-container">
        <br>
        <section class="container">

            <div class="row active-with-click">
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <article class="material-card Red">
                        <h2>
                            <span>Christopher Walken</span>
                            <strong>
                                <i class="fa fa-fw fa-star"></i>
                                The Deer Hunter
                            </strong>
                        </h2>
                        <div class="mc-content">
                            <div class="img-container">
                                <img class="img-responsive" src="img/thumb-christopher-walken.jpg">
                            </div>
                            <div class="mc-description">
                                He has appeared in more than 100 films and television shows, including The Deer Hunter, Annie Hall, The Prophecy trilogy, The Dogs of War ...
                            </div>
                        </div>
                        <a class="mc-btn-action">
                            <i class="fa fa-bars"></i>
                        </a>
                        <div class="mc-footer">
                            <h4>
                                Social
                            </h4>
                            <a class="fa fa-fw fa-facebook"></a>
                            <a class="fa fa-fw fa-twitter"></a>
                            <a class="fa fa-fw fa-linkedin"></a>
                            <a class="fa fa-fw fa-google-plus"></a>
                        </div>
                    </article>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <article class="material-card Pink">
                        <h2>
                            <span>Sean Penn</span>
                            <strong>
                                <i class="fa fa-fw fa-star"></i>
                                Mystic River
                            </strong>
                        </h2>
                        <div class="mc-content">
                            <div class="img-container">
                                <img class="img-responsive" src="img/thumb-sean-penn.jpg">
                            </div>
                            <div class="mc-description">
                                He has won two Academy Awards, for his roles in the mystery drama Mystic River (2003) and the biopic Milk (2008). Penn began his acting career in television with a brief appearance in a 1974 episode of Little House on the Prairie ...
                            </div>
                        </div>
                        <a class="mc-btn-action">
                            <i class="fa fa-bars"></i>
                        </a>
                        <div class="mc-footer">
                            <h4>
                                Social
                            </h4>
                            <a class="fa fa-fw fa-facebook"></a>
                            <a class="fa fa-fw fa-twitter"></a>
                            <a class="fa fa-fw fa-linkedin"></a>
                            <a class="fa fa-fw fa-google-plus"></a>
                        </div>
                    </article>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <article class="material-card Purple">
                        <h2>
                            <span>Clint Eastwood</span>
                            <strong>
                                <i class="fa fa-fw fa-star"></i>
                                Million Dollar Baby
                            </strong>
                        </h2>
                        <div class="mc-content">
                            <div class="img-container">
                                <img class="img-responsive" src="img/thumb-clint-eastwood.jpg">
                            </div>
                            <div class="mc-description">
                                He rose to international fame with his role as the Man with No Name in Sergio Leone's Dollars trilogy of spaghetti Westerns during the 1960s ...
                            </div>
                        </div>
                        <a class="mc-btn-action">
                            <i class="fa fa-bars"></i>
                        </a>
                        <div class="mc-footer">
                            <h4>
                                Social
                            </h4>
                            <a class="fa fa-fw fa-facebook"></a>
                            <a class="fa fa-fw fa-twitter"></a>
                            <a class="fa fa-fw fa-linkedin"></a>
                            <a class="fa fa-fw fa-google-plus"></a>
                        </div>
                    </article>
                </div>
                <!--</div>-->
                <!--<div class="row active-with-hover">-->
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <article class="material-card Deep-Purple">
                        <h2>
                            <span>Dustin Hoffman</span>
                            <strong>
                                <i class="fa fa-fw fa-star"></i>
                                Kramer vs. Kramer
                            </strong>
                        </h2>
                        <div class="mc-content">
                            <div class="img-container">
                                <img class="img-responsive" src="img/thumb-dustin-hoffman.jpg">
                            </div>
                            <div class="mc-description">
                                He has been known for his versatile portrayals of antiheroes and vulnerable characters.[3] He won the Academy Award for Kramer vs. Kramer in 1979 ...
                            </div>
                        </div>
                        <a class="mc-btn-action">
                            <i class="fa fa-bars"></i>
                        </a>
                        <div class="mc-footer">
                            <h4>
                                Social
                            </h4>
                            <a class="fa fa-fw fa-facebook"></a>
                            <a class="fa fa-fw fa-twitter"></a>
                            <a class="fa fa-fw fa-linkedin"></a>
                            <a class="fa fa-fw fa-google-plus"></a>
                        </div>
                    </article>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <article class="material-card Indigo">
                        <h2>
                            <span>Edward Norton</span>
                            <strong>
                                <i class="fa fa-fw fa-star"></i>
                                American History X
                            </strong>
                        </h2>
                        <div class="mc-content">
                            <div class="img-container">
                                <img class="img-responsive" src="img/thumb-edward-norton.jpg">
                            </div>
                            <div class="mc-description">
                                He has been nominated for three Academy Awards for his work in the films Primal Fear, American History X and Birdman. He also starred in other roles ...
                            </div>
                        </div>
                        <a class="mc-btn-action">
                            <i class="fa fa-bars"></i>
                        </a>
                        <div class="mc-footer">
                            <h4>
                                Social
                            </h4>
                            <a class="fa fa-fw fa-facebook"></a>
                            <a class="fa fa-fw fa-twitter"></a>
                            <a class="fa fa-fw fa-linkedin"></a>
                            <a class="fa fa-fw fa-google-plus"></a>
                        </div>
                    </article>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <article class="material-card Blue">
                        <h2>
                            <span>Michael Caine</span>
                            <strong>
                                <i class="fa fa-fw fa-star"></i>
                                Educated Rita
                            </strong>
                        </h2>
                        <div class="mc-content">
                            <div class="img-container">
                                <img class="img-responsive" src="img/thumb-michael-caine.jpg">
                            </div>
                            <div class="mc-description">
                                English actor and author. Renowned for his distinctive working class cockney accent, Caine has appeared in over 115 films and is regarded as a British ...
                            </div>
                        </div>
                        <a class="mc-btn-action">
                            <i class="fa fa-bars"></i>
                        </a>
                        <div class="mc-footer">
                            <h4>
                                Social
                            </h4>
                            <a class="fa fa-fw fa-facebook"></a>
                            <a class="fa fa-fw fa-twitter"></a>
                            <a class="fa fa-fw fa-linkedin"></a>
                            <a class="fa fa-fw fa-google-plus"></a>
                        </div>
                    </article>
                </div>

            </div>
        </section>
    </div>

js代码:

 $(function () {
            $('.material-card').materialCard({
                icon_close: 'fa-chevron-left',
                icon_open: 'fa-thumbs-o-up',
                icon_spin: 'fa-spin-fast',
                card_activator: 'click'
            });

            //        $('.active-with-click .material-card').materialCard();

            window.setTimeout(function () {
                $('.material-card:eq(1)').materialCard('open');
            }, 2000);

            $('.material-card').on('shown.material-card show.material-card hide.material-card hidden.material-card', function (event) {
                console.log(event.type, event.namespace, $(this));
            });

        });

via:http://***/article/55776

基于jQuery HTML5人物介绍卡片特效的更多相关文章

  1. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  2. 基于jQuery发展历程时间轴特效代码

    分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="time ...

  3. 基于jQuery+HTML5加入购物车代码

    基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 基于jQuery悬停图片变色放大特效

    分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width ...

  5. 基于jQuery加入购物车飞入动画特效

    基于jQuery加入购物车飞入动画特效.这是一款电商购物网站常用的把商品加入购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="main& ...

  6. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

  7. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  8. 图像本地预览插件(基于JQUERY、HTML5)

    最近是被这项目搞疯了.害我天天写插件,上周才写,现在就继续吧..... 说说这个吧.主要是用于本地图像预览的.我们知道在以前,图像预览一般都很麻烦,一般都是异步上传然后返回路径,动态设置路径,但是这样 ...

  9. 基于jQuery环形图标菜单旋转切换特效

    分享一款基于jQuery环形图标旋转切换特效.这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码.效果图如下: 在线预览   源码下载 实现的代码. js代码: /* 图片地址可以是相对路径或绝 ...

随机推荐

  1. paip.截取字符串byLastDot方法总结uapi python java php c# 总结

    paip.截取字符串byLastDot方法总结uapi python java php c# 总结 ========uapi   left_byLastDot   right_byLastDot 目前 ...

  2. 将外卖O2O广告一棍子打成竞价排名,秤把平了吗?

    近日,诸多媒体报道称美团外卖.饿了么等外卖O2O将竞价排名引入外卖平台当中进行广告运营一事闹得沸沸扬扬.那么,美团外卖.饿了么真的都是竞价排名吗? 其实,美团外卖的付费推广仅仅只是针对列表的固定位置, ...

  3. Extjs4中RadioGroup的赋值与取值

    1.定义rg var rg = new Ext.form.RadioGroup({ fieldLabel : "test", items : [{ boxLabel : '每天', ...

  4. Ninja Blocks物联网平台简介

    Ninja Blocks是一个物联网控制平台,其平台架构包括硬件层.处理器层.软件层以及平台层,请看下图: 最底层是硬件层,包括传感器(Sensors)和驱动器(Actuators),例如温度传感器. ...

  5. 聊天IM的时间戳显示规则

    ====================================================== 以下规则是在体验微信操作后,推测出来的规则,可能存在一些不准确的表述 ========== ...

  6. RabbitMQ的工作队列和路由

    工作队列:Working Queue   工作队列这个概念与简单的发送/接收消息的区别就是:接收方接收到消息后,可能需要花费更长的时间来处理消息,这个过程就叫一个Work/Task.   几个概念 分 ...

  7. AngularJs应用页面切换优化方案(转)

    目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...

  8. Scrum介绍

    Scrum介绍 摘要 如今,项目管理的步伐越来越快.项目管理需要更灵活.更积极地,向应客户的需求.使用敏捷项目管理方法,项目经理可以在不影响价值.质量和商业规则的前提下实现所有目标,Scrum是一种迭 ...

  9. 解决VS2010中在项目上右键鼠标,无“添加STS引用”菜单的问题

    解决方法:将Windows Identity Foundation SDK文件夹C:\Program Files (x86)\Windows Identity Foundation SDK\v3.5\ ...

  10. linux crontab 文件位置和日志位置

    一.文件位置 位置一般在/var/spool/cron/下,如果你是root用户,那下面有个root文件,建议日常备份,避免误删除导致crontab 文件丢失: 二.日志文件位置 默认情况下,cron ...