[前端设计]卡片式列表

注：本设计由赤石俊哉原创设计，您可以随意使用本设计，但是请在注释中标注来源。
如果您需要转载本文，请先和作者取得联系。

概述

这个设计是之前给我们系里做网页的时候想到的，外表看似列表，实际上在鼠标移动到列表条目上的时候，显示一个摘要卡片，效果就像这样：

虽然可以纯CSS实现，但是在IE9以下等对CSS3动画支持不好的浏览器就悲剧了。于是动画还是使用JQuery来实现比较好。

缺陷

• 暂时还没有办法让摘要随着显示内容自适应高度，我不知道怎么去实现，如果看到文章的你有什么好的建议，可以回帖或者私信。
• 触屏不友好，因为每个条目均是一个连接，然而触屏出发focus和hover的方法均是点击。。。

DOM结构（HTML代码）

<div class="block">    <h1 id="First2015">2015年上半年</h1>    <!--下面是列表项目的主体-->    <!--第一条-->    <a class="cardlistitem">        <div class="title">            <span class="time">2015-05-25</span>            演示列表样例        </div>        <div class="abstract">            <strong>摘要：</strong>摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例        </div>    </a>    <!--第二条-->    <a class="cardlistitem">        <div class="title">            <span class="time">2015-05-25</span>            演示列表样例        </div>        <div class="abstract">            <strong>摘要：</strong>摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例        </div>    </a>    <!--第三条-->    <a class="cardlistitem">        <div class="title">            <span class="time">2015-05-25</span>            演示列表样例        </div>        <div class="abstract">            <strong>摘要：</strong>摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例摘要样例        </div>    </a></div>

上面是一个演示，模板如下：

<div class="cardlistitem">    <div class="title"><!--标题，也就是看起来的列表项目--></div>    <div class="abstract"><!--摘要，也就是鼠标放上去显示的内容--></div></div>

CSS样式（影响列表外观）

.cardlistitem { display: block; height: 45px; position: relative; cursor: pointer; }    .cardlistitem:hover .title { background-color: #0E6EB8; color: #fff; }        /*下面的time是我对列表中时间的排版，可以根据需要自己修改，如果你不需要也可以去掉*/        .cardlistitem .title .time { font-weight: bold; padding: 0 15px; }    .cardlistitem .abstract { font-size: 14px; display: none; opacity: 0; overflow: hidden; position: absolute; left: 40px; right: 25px; padding: 15px 25px; line-height: 20px; top: 45px; height: 0; background-color: #EFEFEF; }

样式编辑说明：
注：除本表列出项目以外的值不建议修改。

选择器 属性 参考值 样式说明 .cardlistitem height 45px 每个列表项的高度。 └.cardlistitem .abstract top 45px 需要和上面的取值一样。 .cardlistitem cursor pointer 鼠标经过时使用手型图标。 .cardlistitem:hover title background-color #0E6EB8 鼠标放在项目上时高亮的背景。 color #FFF 鼠标放在项目上时字体的颜色。 .cardlistitem .abstract font-size 14px 摘要卡片中的字体大小。 top 45px 需要与.cardlistitem的height值相等，否则会出现排版混乱。 left 40px 摘要卡片相对于左侧边的距离。 right 25px 摘要考相对于右侧边的距离。 padding 15px 25px 摘要文字离摘要卡片的边距。 line-height 20px 摘要文字中的行高。 background-color #EFEFEF 摘要卡片的背景色。

脚本(jQuery)

首先记得在调用下面的代码之前，引入jQuery的js库，本脚本使用的测试环境是jQuery 1.11.3，理论上高于这个版本的都没啥问题，因为jQuery 2.x不在支持IE8等浏览器了，所以自己权衡一下吧。

$(document).ready(function () {    //个性化数值    var FadeTimeSpan = 200;    var TitleOffset = 20;    var AbstractBlockHeight = "75px";    //下面的为实现代码，不建议随意修改。    var titlepaddingleft = parseInt($(".cardlistitem .title").css("padding-left"));    $(".cardlistitem .title").mouseenter(function () {        $(this).parent().parent().find(".abstract").each(function () { $(this).css({ "height": "0px", "opacity": "0", "display": "none", "z-index": "0" }); });        $(this).css({ "padding-left": titlepaddingleft + "px" });        $(this).animate({ paddingLeft: (titlepaddingleft + TitleOffset) + "px" }, FadeTimeSpan);        $(this).parent().find(".abstract").css({ "z-index": "99", "display": "block" });        $(this).parent().find(".abstract").animate({ 'height': AbstractBlockHeight, 'opacity': "1.0" }, FadeTimeSpan);    });    $(".cardlistitem .title").mouseleave(function () {        $(this).animate({ paddingLeft: titlepaddingleft + "px" }, FadeTimeSpan);        $(this).parent().find(".abstract").delay(FadeTimeSpan).css({ "height": "0px", "opacity": "0", "display": "none", "z-index": "0" });    });});

个性化数值说明

FadeTimeSpan 整数 动画开始和结束时各种动画（淡入淡出和展开）所需要的时间，单位是ms，类型为整型数。

TitleOffset 整数 鼠标放在列表项目上时，标题向右偏移的长度，负数则向左边移动，单位是px，类型为整型数。

AbstractBlockHeight 字符串 用于设置描述卡片展开之后的高度，可以使用任何可用于height属性的单位的长度数值，需要带单位，比如：3em,50px等，类型为字符串。

测试演示：

http://codepen.io/toshiya14/pen/WGbYYN