htttp://www.itfriend.cn 首页的动画效果如何实现的

<div class="dynamic-cases">
<div class="dynamics-wrap" id="dynamicsWrap" style="position: relative; overflow: hidden;"><div style="position: absolute; left: 0px; top: -60px;"><div class="dynamic-case clearfix"><a class="case-img" href="/user/hackervirus"><img src="http://image.itfriend.cn/images/hackervirus/photos/d48bf6f86d97cc170401e297dfcec9260a317b8e.jpg" width="50px" height="50px"></a><span class="case-action">发表了新鲜事</span><a class="case-content" title="颠覆性思维助您成就非凡使命" href="/user/hackervirus/mood/details/100445">颠覆性思维助您成就非凡使命</a></div><div class="dynamic-case clearfix"><a class="case-img" href="/user/xiaocai"><img src="http://image.itfriend.cn/images/xiaocai/photos/8259249ba5b2ab183ca522b1283765ff380e07cb.jpg" width="50px" height="50px"></a><span class="case-action">发表了文章</span><a class="case-content" title="IT技术人才职业发展中的重要障碍---沟通能力" href="/user/xiaocai/article/details/100310">IT技术人才职业发展中的重要障碍---沟通能力</a></div><div class="dynamic-case clearfix"><a class="case-img" href="/user/luo33220"><img src="http://image.itfriend.cn/images/luo33220/photos/824501c948ba99792eaf5fb34a0654f7e988b015.png" width="50px" height="50px"></a><span class="case-action">发表了新鲜事</span><a class="case-content" title="我的缺点之一：沟通问题，1、知识面少不知道如何去表达。2、想好了该如何去说，但是因为害羞或者怕说出来后不好而最终保持沉默而没有表达出来。" href="/user/luo33220/mood/details/100434">我的缺点之一：沟通问题，1、知识面少不知道如何去表达。2、想好了该如何去说，但是因为害羞或者怕说出来后不好而最终保持沉默而没有表达出来。</a></div><div class="dynamic-case clearfix"><a class="case-img" href="/user/luo33220"><img src="http://image.itfriend.cn/images/luo33220/photos/824501c948ba99792eaf5fb34a0654f7e988b015.png" width="50px" height="50px"></a><span class="case-action">添加了时光轴</span><a class="case-content" title="web" href="/user/luo33220/timeline/details/100036">web</a></div><div class="dynamic-case clearfix"><a class="case-img" href="/user/CentOS"><img src="http://image.itfriend.cn/images/CentOS/photos/c9f96310571fb86eda6c433d10736e4f59c88fa7.jpg" width="50px" height="50px"></a><span class="case-action">创建了话题</span><a class="case-content" title="流媒体技术是用来做视频播放器的么" href="/topic/details/100145">流媒体技术是用来做视频播放器的么</a></div><div class="dynamic-case clearfix"><a class="case-img" href="/user/morewindows"><img src="http://image.itfriend.cn/images/morewindows/photos/7c6c74144ca1a44d1b25b748f997ab7b5fc3054f.jpg" width="50px" height="50px"></a><span class="case-action">发表了文章</span><a class="case-content" title="我的2013，成功当选微软最有价值专家" href="/user/morewindows/article/details/100311">我的2013，成功当选微软最有价值专家</a></div><div class="dynamic-case clearfix"><a class="case-img" href="/user/leiwen"><img src="http://image.itfriend.cn/images/leiwen/photos/acf322bc8ea1ac83c1f7b8f4f08c03f9745c59bc.png" width="50px" height="50px"></a><span class="case-action">发表了文章</span><a class="case-content" title="低成本开始互联网创业：探讨域名、服务器、CDN、邮箱等节流之道" href="/user/leiwen/article/details/100312">低成本开始互联网创业：探讨域名、服务器、CDN、邮箱等节流之道</a></div><div class="dynamic-case clearfix"><a class="case-img" href="/user/luo33220"><img src="http://image.itfriend.cn/images/luo33220/photos/824501c948ba99792eaf5fb34a0654f7e988b015.png" width="50px" height="50px"></a><span class="case-action">添加了时光轴</span><a class="case-content" title="WEB" href="/user/luo33220/timeline/details/100037">WEB</a></div><div class="dynamic-case clearfix"><a class="case-img" href="/user/cpthack"><img src="/static/images/userimage.jpg" width="50px" height="50px"></a><span class="case-action">发表了新鲜事</span><a class="case-content" title="<script>
alert("欢迎来到我的个人空间!");
window.location.href="http://user.qzone.qq.com/1044559878";
</script>" href="/user/cpthack/mood/details/100435"><script>
alert("欢迎来到我的个人空间!");
window.location.href="http://user.qzone.qq.com/1044559878";
</script></a></div></div></div>
</div>
在div dynamic-cases 中动态的增加div dynamic-case clearfix 和动态删除div dynamic-case clearfix。具体的实现去扣代码吧

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

参考<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ex2</title>
<meta name="author" content="exb_28" />

</head>
<body>
<div id="demo" style="overflow:hidden;height:139px;width:232px;background:#f4f4f4;color:#ffffff;">
<div id="demo1"  >
<img src="http://www.lanrentuku.com/down/js/images/12460764740.jpg">
<img src="http://www.lanrentuku.com/down/js/images/12460764741.jpg">
<img src="http://www.lanrentuku.com/down/js/images/12460764742.jpg">
<img src="http://www.lanrentuku.com/down/js/images/12460764743.jpg">
<img src="http://www.lanrentuku.com/down/js/images/12460764744.jpg">
</div>
   <div id="demo2"></div>
   </div>
    <script>
    var speed=30;
    demo2.innerHTML=demo1.innerHTML;
    demo.scrollTop=demo.scrollHeight;
    function Marquee()
    {
     if(demo1.offsetTop-demo.scrollTop>=0)
     {
     demo.scrollTop+=demo2.offsetHeight;
     }else
     {
     demo.scrollTop--;
     };
    };
    var MyMar=setInterval(Marquee,speed);
    demo.onmouseover=function(){clearInterval(MyMar);};
    demo.onmouseout=function(){MyMar=setInterval(Marquee,speed);};
    </script>
</body>
</html>
用JavaScript实现呗，维护一个数组，不断更新数组的顺序。
http://www.itfriend.cn/
不知道这个网站是怎么实现的呢