setTimeout实现缓慢移动和clearTimeout停止移动效果

kos — Mon, 16 Nov 2009 03:01:08 +0000

　　前面一篇文章实现了用其它方式代替滚动条的方法，能够更容易的美化页面，而那种方法有一个缺陷就是给人视觉上的反应不是很一目了然，每点击按钮触发一次事件后，就直接从一个位置滚动到另一个位置，看不到整个滚动过程
其实前面一篇文章对于正常的使用完全没有问题了，但为了让其更完美决定把此功能完善了一下
先看看下面的效果



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <title>无标题文档</title> <link type="text/css" rel="stylesheet" href="http://www.uideas.cn/download/menuscrollbak.css"> </head>  <body onLoad="setmenu()">  <div class="mainDiv">  <div id="menutop"> </div> <div id="cov">  <div id="menu">  <p class="contenttitle">快乐不快乐(郑秀文)</p> 	 <p>咖啡淡了</p> 	  <p>是因为冰块溶了</p> <p>没怎么了</p> <p>淡了就是淡了</p> <p>搁在桌上还要不要</p> <p>不再爱了</p> <p>是因为感情坏了</p> <p>你怎么了</p> <p>坏了就是坏了</p> <p>没有什么大不了</p> <p>我们不快乐</p> <p>快乐后不再快乐</p> <p>就在最后的一秒</p> <p>抱了吻了哭了</p> <p>快乐不快乐</p> <p>没人快不快乐</p> <p>就在最后的一秒</p> <p> </p> <p>我们的关系就这样了</p> <p>咖啡淡了</p> <p>是因为冰块溶了</p> <p>没怎么了</p> <p>淡了就是淡了</p> <p>搁在桌上还要不要</p> <p>不再爱了</p> <p>是因为感情坏了</p> <p>你怎么了</p> <p>坏了就是坏了</p> <p>没有什么大不了</p> <p>我们不快乐</p> <p>快乐后不再快乐</p> <p>就在最后的一秒</p> <p>抱了吻了哭了</p> <p>快乐不快乐</p> <p>没人快不快乐</p> <p>就在最后的一秒</p> <p> </p> <p>我们的关系就这样了</p> <p> </p> 	 </div>  </div>  <div id="menubottom"></div> </div>  </body> <script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/menuscrollbak.js"></script>  </html> 




[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

相关下载：
　　js下载：menuscrollbak.js
　　css下载点击menuscrollbak.css

散人笔记 » 缓慢移动

setTimeout实现缓慢移动和clearTimeout停止移动效果