简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

文字垂直滚动之javascript代码_javascript技巧

WBOY
Release： 2016-05-16 15:48:12
Original
1325 people have browsed it

在大型的网站新闻公告和友情链接等领域经常有这种文字或图片垂直滚动的效果，下面就介绍一下文字垂直滚动的javascript代码。

javascript代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style> 
a { 
 display:block; 
 font-size:15px; 
 line-height:18px; 
 text-decoration:none; 
 color:#333; 
 font-family:Arial; 
 font-size:12px; 
} 
.main{ 
 background:no-repeat 4px 5px; 
 border:1px solid #aaa; 
 width:400px; 
 padding:3px 2px 2px 20px; 
} 
#thediv{ 
 height:36px; 
 overflow:hidden; 
} 
</style>
<script type="text/javascript">
var c, _ = Function;
window.onload=function(){ 
 with (o = document.getElementById("thediv")){ 
 innerHTML += innerHTML; onmouseover = _("c=1"); onmouseout = _("c=0");
 } 
 (F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18&#63;10:3000);".replace(/#/g,"o.scrollTop")))(); 
}
</script> 
</head> 
<body> 
<div class="main"> 
<div id="thediv"> 
 <a>蚂蚁部落欢迎您</a> 
 <a>只有奋斗才会有好的结果</a> 
 <a>高手都是从菜鸟成长而来</a> 
 <a>太阳马上就要出来了</a> 
 </div> 
</div> 
</body> 
</html>
Copy after login

以上代码就实现了文字垂直滚动的效果，文字可有上下间歇性的滚动，有需要的朋友可以来参考下，希望大家喜欢。

Related labels：
垂直滚动代码 javascript特效代码 文字垂直滚动
source：php.cn
Previous article：JavaScript中的cacheStorage使用详解_基础知识 Next article：使用js复制链接中的部分文字的方法_javascript技巧
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Capturing Y coordinates using touchmove: a step-by-step guide I'm trying to make a mobile app using html, javascript and canvas, basically scrolling dow...
From 2023-10-08 10:35:03
0
1
321
Apply the `margin` attribute to the `fixed` element and `z-index: 1` There is a list and a comment field. The comment field is fixed to the bottom of the page....
From 2023-09-17 21:44:03
0
1
285
Can't scroll vertically in React mode I'm trying to display a modal in my React project. When the modal is shown, I set the body...
From 2023-09-16 11:18:16
0
1
658
Is it impossible to have a full page three row CSS-Flex layout in mobile safari? Sample code: https://jsfiddle.net/Lsfvotd2/2/ doesn't seem to solve the issue of the float...
From 2023-09-15 18:24:47
0
1
200
Creating Vertically Connected Dendrograms: Echart Implementation Guide The code below is an example of using Echart's treemap, I want each series to be arranged ...
From 2023-09-15 15:25:10
0
1
412
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！