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

推荐订阅源

WordPress大学
WordPress大学
The GitHub Blog
The GitHub Blog
F
Fortinet All Blogs
Cloudbric
Cloudbric
P
Palo Alto Networks Blog
T
Threatpost
T
Tor Project blog
T
Tenable Blog
AWS News Blog
AWS News Blog
Project Zero
Project Zero
L
LangChain Blog
Cyberwarzone
Cyberwarzone
Engineering at Meta
Engineering at Meta
雷峰网
雷峰网
C
CERT Recently Published Vulnerability Notes
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Security Latest
Security Latest
云风的 BLOG
云风的 BLOG
I
Intezer
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
P
Proofpoint News Feed
A
Arctic Wolf
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Google DeepMind News
Google DeepMind News
V
Vulnerabilities – Threatpost
C
Cybersecurity and Infrastructure Security Agency CISA
MongoDB | Blog
MongoDB | Blog
aimingoo的专栏
aimingoo的专栏
K
Kaspersky official blog
Jina AI
Jina AI
N
News | PayPal Newsroom
T
The Blog of Author Tim Ferriss
D
DataBreaches.Net
A
About on SuperTechFans
博客园 - 三生石上(FineUI控件)
博客园 - 【当耐特】
Hugging Face - Blog
Hugging Face - Blog
Recorded Future
Recorded Future
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
S
Secure Thoughts
TaoSecurity Blog
TaoSecurity Blog
P
Privacy & Cybersecurity Law Blog
P
Proofpoint News Feed
MyScale Blog
MyScale Blog
IT之家
IT之家
Forbes - Security
Forbes - Security
The Hacker News
The Hacker News
Last Week in AI
Last Week in AI
T
Threat Research - Cisco Blogs
Y
Y Combinator Blog

博客园 - 鬼手

有趣的网页效果 杀毒软件测试代码 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;这样的视觉效果是文本一直在向上移动。向不同方向的移动也可以类似实现。