【前言】
纯JS实现文字或新闻竖直方向滚动，先看个案例
【主体】
（1）JS获取数值方向滚动距离selector.scrollTop
（2）JS获取元素高度（包含边框和内边距）selector.offectHeight
（3）高度获取
1、clientHeight：height+上下padding（内部可视区高度）
2、offsetHeight：height+上下padding+上下border-width（div的可视高度）
3、scrollHeight：内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）
4、height：在几个浏览器中都是undefined
5、style.height：遗憾的是只有将高度定义在元素的style属性中这个变量才有效，如果是抽取到了样式表中是无法取到的
（4）本例中我们用到了offectHeight来获取元素高度
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字滚动</title>
<style type="text/css">
/*代码初始化*/
*{
margin: 0;
padding: 0;
}
ul li,ol li{
list-style-type: none;
}
a{
text-decoration: none;
}
/*代码主体*/
.main{
width: 300px;
height: 400px;
border: 1px solid rgba(0,0,0,0.3);
margin: 10px auto;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
overflow-y: hidden;
}
.show1 li,.show2 li{
width: 100%;
height: 100px;
border-bottom: 1px solid rgba(0,0,0,0.2);
box-sizing: border-box;
line-height: 100px;
text-align: center;
font-size: 26px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<ul class="show1">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
<li>新闻5</li>
<li>新闻6</li>
<li>新闻7</li>
<li>新闻8</li>
</ul>
<ul class="show2">
</ul>
</div>
<script type="text/javascript">
var main = document.getElementsByClassName("main")[0];
var show1 = document.getElementsByClassName("show1")[0];
var show2 = document.getElementsByClassName("show2")[0];
var timeId;
show2.innerHTML = show1.innerHTML;
timeId = setInterval(play,25);
function play(){
if (main.scrollTop >= show1.offsetHeight) {
main.scrollTop=0;
}else{
main.scrollTop++;
}
}
play();
main.onmouseover = function(){
clearInterval(timeId)
};
main.onmouseout = function(){
timeId = setInterval(play,25);
};
</script>
</body>
</html>
.
相关推荐
文字上下轮播滚动，纯js实现，结构简单明了，几行代码即可
"js+css3文字上下滚动切换动画特效"就是一种实现这种效果的技术方案。它结合了JavaScript（js）的编程逻辑与CSS3的新特性，为网页的文字展示带来了生动且富有创意的变化。 首先，我们来了解JavaScript（js）的作用...
"js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用，主要用于创建一种视觉上连续、无中断的文字滚动展示，常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息，而不会显得拥挤。...
根据提供的标题、描述、标签及部分内容，我们可以了解到这段材料主要涉及一种基于jQuery的逐行定期滚动JavaScript代码。接下来，我们将详细解析这些信息所涵盖的知识点。 ### 一、逐行定期滚动JS代码概述 逐行定期...
网上找到很多文字滚动，但都良莠不齐，基本都是左右滚动的，没有上下滚动。所以来分享一波 利用scortop实现文字移动，判断如果第一个元素的高度，如果小于等于了scrolltop（翻滚了多少高度）就把它删除并且添加到...
用JS实现图片或文字向上或向下无缝隙滚动
【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果，它模拟了新浪微博中图片和文字列表的滚动展示方式，通常用于新闻资讯或者社交媒体的动态展示...
本文将详细介绍如何用JavaScript实现上下滚动的跑马灯效果。 首先，我们需要理解跑马灯效果的基本原理：它通常是通过改变元素的位置或透明度，模拟出内容持续移动的视觉效果。对于上下滚动的跑马灯，我们需要控制...
在这个例子中，jQuery被用来实现文字列表的滚动功能。首先，我们需要将这个库引入到HTML文件（如101.htm）中，通过`<script>`标签链接到jQuery库，确保页面加载后可以调用其函数。 接下来，我们需要选择要滚动的...
在探讨“js文字间隔滚动上下滚动”的知识点时，我们深入分析了如何利用JavaScript结合jQuery库实现文本元素的动态上下滚动效果。这一技术在网站设计、新闻滚动条、公告栏等场景中极为常见，能有效提升用户体验，使得...
本文将详细介绍如何使用JavaScript和jQuery来实现公告栏内容的自动滚动效果。 首先，我们需要理解公告栏滚动效果的基本原理。在给定文件示例中，公告栏的滚动效果是通过动态修改HTML元素CSS属性（如`marginTop`）来...
其中一种常见的动态效果就是利用`<marquee>`标签来实现文字或图片的自动滚动。不过，在提供的代码片段中，并没有直接使用HTML标准中的`<marquee>`标签，而是通过JavaScript结合CSS来模拟了类似的效果。接下来，我们...
标题中的“jquery新浪微博图片文字列表间歇上下滚动淡进淡出滚动”是一个jQuery实现的动态效果，主要用于展示新浪微博上的图片和文字内容。这种效果可以使页面更生动，吸引用户的注意力，通常应用于新闻网站、社交...
一旦引入jQuery，你可以编写JavaScript代码来实现文字滚动。一种简单的方法是使用`animate()`函数，它可以改变CSS属性，如`top`或`bottom`，以创建滚动效果。以下是一个基本的示例： ```javascript $(document)....
接下来，编写jQuery代码来实现文字滚动效果。这里可以使用`animate()`函数来改变文本的`top`或`transform`属性，模拟文字的滚动。一个简单的实现方法是先将所有标题添加到一个看不见的容器，然后逐个将其移动到可视...
（鼠标移入，滚动停止；鼠标移出，滚动继续） 实现原理 1. html结构：核心是ul > li，ul外层包裹着div。因为想要内容循环滚动无缝衔接，所以在原有ul后面还要有一个一样内容的ul。如下图： （红色边框为可视...
《jQuery实现文字上下滚动插件meuiTextScroll详解》 在网页设计中，动态效果能够提升用户体验，使得信息展示更具吸引力。jQuery作为一个轻量级、功能丰富的JavaScript库，为开发者提供了许多便利。本文将深入探讨...
在本主题中，我们主要关注如何使用JS实现图片和文字的无缝滚动效果。 首先，无缝滚动的概念是让内容在到达视口顶部或底部时自动平滑地切换到下一个内容，给用户一种连续无断点的浏览体验。这种效果在网站中常见于...
jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现各种动态效果，其中包括文字无缝循环滚动。本篇文章将详细解析如何使用jQuery实现标题中提到的"排名文字无缝循环向上滚动"的效果，并结合给定的文件结构...