日志
JS实现marquee效果（转）
|
来自：http://www.cnblogs.com/webwei/archive/2006/11/11/557755.html
1.test.html
<html>
<body>
<div id="news1">滚动部分文字</div>
<div id="news2"></div>
<script type="text/javascript" src="ShowMarquee.js"></script>
</body>
</html>
2.ShowMarquee.js
4. 道理其实并不复杂（news2也并没有什么用处，可以改动一下，只用一个div实现）：计算出div内文本的高度（Apx）；将文本copy成上下连接的 两份，高度为（2Apx）；每周期向上移动1px；如果移动到2A的底部，则向下移动一个文本高度（Apx），继续向上滚动1px；这样的视觉效果是文本 一直在向上移动。向不同方向的移动也可以类似实现。
1.test.html
<html><body><div id="news1">滚动部分文字</div><div id="news2"></div><script type="text/javascript" src="ShowMarquee.js"></script></body></html>2.ShowMarquee.js
// JavaScript Document
h1=document.getElementById("news1");
h2=document.getElementById("news2");
stopscroll=false;
h1.scrollTop=0;
h1.onmouseover=new Function("stopscroll=true");
h1.onmouseout=new Function("stopscroll=false");
preTop=0;
function init_srolltext(){
h2.innerHTML=h1.innerHTML;
h1.innerHTML=h2.innerHTML+h2.innerHTML;
h1.scrollTop=0;
setInterval("scrollUp()",50);
}
function scrollUp(){
if(stopscroll==true) return;
preTop=h1.scrollTop;
h1.scrollTop+=1;
if(preTop==h1.scrollTop){
h1.scrollTop=h1.scrollTop-h2.offsetHeight;
h1.scrollTop+=1;
}
}
init_srolltext();
3.Css样式中，将"news2"的display设置为"none"，"news1"中是需要滚动的文本；另外news1和news2俩个div的样式要完全相同，否则它们的offsetHeight会不同，向上滚动时会出现“跳行”的效果。h1=document.getElementById("news1");
h2=document.getElementById("news2");
stopscroll=false;
h1.scrollTop=0;
h1.onmouseover=new Function("stopscroll=true");
h1.onmouseout=new Function("stopscroll=false");
preTop=0;
function init_srolltext(){
h2.innerHTML=h1.innerHTML;
h1.innerHTML=h2.innerHTML+h2.innerHTML;
h1.scrollTop=0;
setInterval("scrollUp()",50);
}
function scrollUp(){
if(stopscroll==true) return;
preTop=h1.scrollTop;
h1.scrollTop+=1;
if(preTop==h1.scrollTop){
h1.scrollTop=h1.scrollTop-h2.offsetHeight;
h1.scrollTop+=1;
}
}
init_srolltext();
4. 道理其实并不复杂（news2也并没有什么用处，可以改动一下，只用一个div实现）：计算出div内文本的高度（Apx）；将文本copy成上下连接的 两份，高度为（2Apx）；每周期向上移动1px；如果移动到2A的底部，则向下移动一个文本高度（Apx），继续向上滚动1px；这样的视觉效果是文本 一直在向上移动。向不同方向的移动也可以类似实现。
