最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果,基本实现了和知乎动态列表相同的效果。如下:
1.基本列表项

2.列表项全文展开、折叠(图中为展开第一项)

3.评论项展开

4.列表数据加载(加载全部)

5.带动画效果的点赞功能

6.回复列表的hover显示功能

HTML代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" />
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="scripts/jquery.json.min.js"></script>
<link rel="stylesheet" href="styles/main.css" />
<script src="scripts/test.js"></script>
</head>
<body>
<div style="display:none;">
<div id="t_dn" class="dynamic_node">
<meta class="dn_id" content=""/>
<meta class="dn_user_id" content=""/>
<div class="dn_left">
<div class="dn_user_avatar"><a href="">
<img class="img-thumbnail" src="" /></a>
</div>
<div class="dn_zannum">
<span></span>
</div>
<div class="dn_dianzan">
<a href=""><span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span></a>
</div>
</div>
<div class="dn_right">
<div class="dn_title">
<span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span>
<a href=""><span></span></a>
</div>
<div class="dn_right_top">










