惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

D
DataBreaches.Net
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
云风的 BLOG
云风的 BLOG
B
Blog
博客园 - Franky
I
InfoQ
A
About on SuperTechFans
博客园_首页
L
LangChain Blog
量子位
腾讯CDC
Microsoft Security Blog
Microsoft Security Blog
博客园 - 【当耐特】
美团技术团队
V
V2EX
Apple Machine Learning Research
Apple Machine Learning Research
雷峰网
雷峰网
MongoDB | Blog
MongoDB | Blog
Microsoft Azure Blog
Microsoft Azure Blog
月光博客
月光博客
T
The Blog of Author Tim Ferriss
P
Proofpoint News Feed
G
Google Developers Blog
Last Week in AI
Last Week in AI

博客园 - 鬼手

有趣的网页效果 杀毒软件测试代码 Gmail邀请函 Office的组织结构图 博客园出问题了? 利用js在网页中插入flash 获取网页内容 关于IE WebControl 无法加载XML的问题(后续) Ajax.net Onloading Example KBSBBS安装 SQL企业管理器打不开的解决办法 IE WebControl 无法显示XML的问题 自己制作的一些网站 开始要忙了 记录一些网址 备忘 获取地址栏参数 用JAVASCRIPT 控制FRMAE的子窗口 在css中加入事件
JS实现marquee效果
鬼手 · 2006-11-11 · via 博客园 - 鬼手

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==truereturn;
     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会不同,向上滚动时会出现“跳行”的效果。
4.道理其实并不复杂(news2也并没有什么用处,可以改动一下,只用一个div实现):计算出div内文本的高度(Apx);将文本copy成上下连接的两份,高度为(2Apx);每周期向上移动1px;如果移动到2A的底部,则向下移动一个文本高度(Apx),继续向上滚动1px;这样的视觉效果是文本一直在向上移动。向不同方向的移动也可以类似实现。