1.先写两个最常用最简洁的滚动代码 代码如下： 水平滚动： <marquee direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1">水平滚动字幕内容</marquee> 垂直滚动： <marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1">垂直滚动字内容</marquee> 2.平稳不间断滚动 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> var tm=null function newsScroll() { var scrollimg=document.getElementById("scroll") if(scrollimg.parentNode.scrollTop!=(scrollimg.clientHeight/2)) scrollimg.parentNode.scrollTop++; else scrollimg.parentNode.scrollTop=0 } window.onload=function() { tm=setInterval('newsScroll()',25) } function stop() { clearInterval(tm) } function start() { tm=setInterval('newsScroll()',25) } </SCRIPT> /* stop() start() 不能和调用ID在同一个容器内， 如容器没默认高度 要制定高度*/ 3 有停留滚动 代码示例： 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} 多行滚动演示： 这是公告标题的第一行 这是公告标题的第二行 这是公告标题的第三行 这是公告标题的第四行 这是公告标题的第五行 这是公告标题的第六行 这是公告标题的第七行 这是公告标题的第八行 向前 向后 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 4:一个简单的滚动代码学习制作示例 无间断循环滚动效果 .scroll{ height:20px; overflow:hidden; font-size:12px; line-height:20px; border:#A5A5A5 1px dotted; width:120px; margin:0px auto; text-align:center; } 北 京|上 海|广 州|西 安|南 京|大 连|哈尔滨|武 汉 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] Js代码说明： JavaScript代码： 复制代码 代码如下: var s,sn=0,timer,slen,timer2; //初始化设置 function scrollInit(){ s=getid("s1"); //获取需要滚动内容的对象 s.scrollTop=0; //初始化滚动位置 slen=s.innerHTML.split("|"); //获取滚动内容，并存入数组，以便显示调用 s.innerHTML=""; //清空滚动对象内容 for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"<br />");} //格式化输出滚动内容 s.innerHTML+=slen[0]; timer2=setInterval(scrollstart,3000); //开始滚动 s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";} //鼠标经过，停止滚动，改变样式 s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";} //鼠标移开，恢复滚动 } //开启滚动效果 function scrollstart(){ if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;} //滚动内容到底时，重置内容位置 timer=setInterval(scrollexec,30); //执行滚动动画效果 } //滚动动画效果 function scrollexec(){ if(sn<20){ sn++; s.scrollTop++; }else{ sn=0; clearInterval(timer); } } //通过ID获取对象 function getid(id){return document.getElementById(id);} //网页加载后，执行初始化 window.onload=scrollInit; 原理解析： 1、首先给容器设定高度或宽度，比如div，设置div高20px;overflow:hidden； 2、容器高度设定后，内容的高度超出20px，超过部分溢出，被隐藏，scrollTop属性可用，这一点可以用overflow:scroll来看效果； 3、改变容器的scrollTop（上下滚动）或scrollLeft（左右滚动）属性的值，让内容移动位置（滚动的原理）； 4、到滚动的高度scrollTop大于或等于内容的高度时，设置scrollTop=0，让内容返回原来的位置，重新开始滚动，无间断循环滚动效果就出现了。

　　推荐阅读

　　javascript 用原型继承来实现对象系统

javascript中,对象没有原型,而构造器有原型 原型的含义:如果构造器有一个原型对象 A,则由该构造器创建的实例都必然复制自A 复制代码 代码如下: /*申明2个构造器*/ var flower=function(){ this.name="nokia"; } va>>>详细阅读

本文标题：javascript 实现滚动效果代码整理

地址：http://www.17bianji.com/kaifa2/JS/26832.html

 1/2    1