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

ipoer 2014-06-16 05:09:52

login页面有一个滚动的动画效果，忘各位有经验的给个思路。

...全文

378 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

小雷FansUnion 2014-06-26

打赏
举报

用JavaScript实现呗，维护一个数组，不断更新数组的顺序。 http://www.itfriend.cn/ 不知道这个网站是怎么实现的呢

gaoyun1990 2014-06-20

打赏
举报

JQuery好像由对应的控件

小小码世界 2014-06-20

打赏
举报

这个不就是定时滚动的效果吗

__Daniel 2014-06-20

打赏
举报

参考


<!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" />
		<!-- Date: 2014-06-20 -->
	</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>

ipoer 2014-06-20

打赏
举报

代码被压缩了

0ldPine 2014-06-16

打赏
举报


<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。具体的实现去扣代码吧