js巧用scrollTop属性使滚动条以另一种方式表现（兼容）

kos — Mon, 09 Nov 2009 17:16:49 +0000

　　很久没写东西了，最近网上到处找一些处理滚动的js
看来看去，看到恼火，都是些长篇大论，写得太多，本想在里面找个好用点的收集到起，结果不好用的归不好用，复杂的归复杂，最后还是自己动手写了一个简单的

先研究一下想法
　　在网页的很多地方可能大家都讨厌滚动条，比如页面上有背景颜色，而改变滚动条的样式只有ie6内核的浏览器支持，所以可以不要滚动条，而一样达到滚动的效果，这里有个例子是实现上下滚动
再来谈一下思路
　　1、点击一个按钮即让里面内容上下滚动其实就是让scrollTop的值发生改变
　　2、当内容顶对齐后就不再要向上点击的按钮，向下亦同，即判断scrollTop的值和内容的实际高度与外面容器的值的关系

来个例子让大家看看才是真的(兼容的哦)：



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/menuscroll.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> 	</div> </div> <div id="menubottom"></div> </div> </body> <script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/menuscroll.js"></script> </html> 




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

相关下载：
　　css下载：menuscroll.css
　　js下载：menuscroll.js

有关图片或文字的连续滚动

kos — Tue, 20 Oct 2009 11:22:27 +0000

　　在处理滚动上，通常采用Marquee，只需要加上这个标签，给这个标签设定一个宽度和高度就能实现了，代码如下：



CODE
<marquee direction="up" height="100" width="300" style="background:#F6F6F6;border:1px #999999 solid;" onmouseout="this.start()" onMouseOver="this.stop()" scrollamount="2"> <p>这只是一个简单的例子</p> <p>仅仅利用marquee实现的滚动</p> <p>当然</p> <p>没有太多必要的话</p> <p>用这种滚动已经能让页面有动感了</p> </marquee> 




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

　　然而这样的滚动会出现一个问题，当marquee里面的内容滚动一次完成后，会出现一片空白，再重新滚动，会影响到页面的整体效果，要达到连续滚动则需要用js来控制，通过使用setTimeout和setInterval方法都能实现这样的功能，下面例子仅以setInterval为例作一个简单介绍。
代码如下：



CODE
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <style type="text/css"> <!-- #Nomain{border: 1px #FFFF00 solid; padding:10px; width: 500px;} #Nodiv {background: #FFF;overflow:hidden;width: 500px; height:60px;} #Nocov {float: left;width:400%;} #Nocontent {float: left;} #Nofloat {float: left;} --> </style> <div id="Nomain"> <div id="Nodiv"> <div id="Nocov"> <div id="Nocontent">  </div> <div id="Nofloat"></div> </div> </div> </div> <script> var speed=10; var Nodiv=document.getElementById("Nodiv"); var Nocontent=document.getElementById("Nocontent"); var Nofloat=document.getElementById("Nofloat"); Nofloat.innerHTML=Nocontent.innerHTML; function Marquee(){ 	if(Nofloat.offsetWidth-Nodiv.scrollLeft<=0) 	Nodiv.scrollLeft-=Nocontent.offsetWidth; 	else{ 	Nodiv.scrollLeft++; 	} } var MyMar=setInterval(Marquee,speed); Nodiv.onmouseover=function() {clearInterval(MyMar)}; Nodiv.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> </body> </html>




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

说明一下，speed的值越大，移动越慢，反知，这里设置的是图片向左移动，你只需要稍加修改就可以让其向右移动，甚至向上，或向下移动都行！目前没发现有bug,如果有值得改进的地方，希望各位提出宝贵的意见！

散人笔记 » 滚动

js巧用scrollTop属性使滚动条以另一种方式表现（兼容）

有关图片或文字的连续滚动