基于jQuery HTML5人物介绍卡片特效
基于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)); }); });
基于jQuery HTML5人物介绍卡片特效的更多相关文章
- 基于jQuery图片弹出翻转特效代码
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代 ...
- 基于jQuery发展历程时间轴特效代码
分享一款基于jQuery发展历程时间轴特效代码,带左右箭头,数字时间轴选项卡切换特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="time ...
- 基于jQuery+HTML5加入购物车代码
基于jQuery+HTML5加入购物车代码.这是一款基于jquery+html5实现的支持累加计价的网站购物车代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery悬停图片变色放大特效
分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div style="width ...
- 基于jQuery加入购物车飞入动画特效
基于jQuery加入购物车飞入动画特效.这是一款电商购物网站常用的把商品加入购物车代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="main& ...
- 8款基于Jquery的WEB前端动画特效
1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...
- 10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
- 图像本地预览插件(基于JQUERY、HTML5)
最近是被这项目搞疯了.害我天天写插件,上周才写,现在就继续吧..... 说说这个吧.主要是用于本地图像预览的.我们知道在以前,图像预览一般都很麻烦,一般都是异步上传然后返回路径,动态设置路径,但是这样 ...
- 基于jQuery环形图标菜单旋转切换特效
分享一款基于jQuery环形图标旋转切换特效.这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码.效果图如下: 在线预览 源码下载 实现的代码. js代码: /* 图片地址可以是相对路径或绝 ...
随机推荐
- paip.截取字符串byLastDot方法总结uapi python java php c# 总结
paip.截取字符串byLastDot方法总结uapi python java php c# 总结 ========uapi left_byLastDot right_byLastDot 目前 ...
- 将外卖O2O广告一棍子打成竞价排名,秤把平了吗?
近日,诸多媒体报道称美团外卖.饿了么等外卖O2O将竞价排名引入外卖平台当中进行广告运营一事闹得沸沸扬扬.那么,美团外卖.饿了么真的都是竞价排名吗? 其实,美团外卖的付费推广仅仅只是针对列表的固定位置, ...
- Extjs4中RadioGroup的赋值与取值
1.定义rg var rg = new Ext.form.RadioGroup({ fieldLabel : "test", items : [{ boxLabel : '每天', ...
- Ninja Blocks物联网平台简介
Ninja Blocks是一个物联网控制平台,其平台架构包括硬件层.处理器层.软件层以及平台层,请看下图: 最底层是硬件层,包括传感器(Sensors)和驱动器(Actuators),例如温度传感器. ...
- 聊天IM的时间戳显示规则
====================================================== 以下规则是在体验微信操作后,推测出来的规则,可能存在一些不准确的表述 ========== ...
- RabbitMQ的工作队列和路由
工作队列:Working Queue 工作队列这个概念与简单的发送/接收消息的区别就是:接收方接收到消息后,可能需要花费更长的时间来处理消息,这个过程就叫一个Work/Task. 几个概念 分 ...
- AngularJs应用页面切换优化方案(转)
目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...
- Scrum介绍
Scrum介绍 摘要 如今,项目管理的步伐越来越快.项目管理需要更灵活.更积极地,向应客户的需求.使用敏捷项目管理方法,项目经理可以在不影响价值.质量和商业规则的前提下实现所有目标,Scrum是一种迭 ...
- 解决VS2010中在项目上右键鼠标,无“添加STS引用”菜单的问题
解决方法:将Windows Identity Foundation SDK文件夹C:\Program Files (x86)\Windows Identity Foundation SDK\v3.5\ ...
- linux crontab 文件位置和日志位置
一.文件位置 位置一般在/var/spool/cron/下,如果你是root用户,那下面有个root文件,建议日常备份,避免误删除导致crontab 文件丢失: 二.日志文件位置 默认情况下,cron ...