【前言】
纯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+css3文字上下滚动切换动画特效"就是一种实现这种效果的技术方案。它结合了JavaScript（js）的编程逻辑与CSS3的新特性，为网页的文字展示带来了生动且富有创意的变化。 首先，我们来了解JavaScript（js）的作用...
"js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用，主要用于创建一种视觉上连续、无中断的文字滚动展示，常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息，而不会显得拥挤。...
根据提供的标题、描述、标签及部分内容，我们可以了解到这段材料主要涉及一种基于jQuery的逐行定期滚动JavaScript代码。接下来，我们将详细解析这些信息所涵盖的知识点。 ### 一、逐行定期滚动JS代码概述 逐行定期...
网上找到很多文字滚动，但都良莠不齐，基本都是左右滚动的，没有上下滚动。所以来分享一波 利用scortop实现文字移动，判断如果第一个元素的高度，如果小于等于了scrolltop（翻滚了多少高度）就把它删除并且添加到...
标题中的“jQuery Bootstrap响应式新闻列表文字上下滚动特效”指的是使用jQuery库和Bootstrap框架来创建一个适应不同设备屏幕尺寸的新闻列表，同时实现文字的上下滚动效果。这种特效常见于网站的新闻或更新部分，...
用JS实现图片或文字向上或向下无缝隙滚动
本文将详细介绍如何用JavaScript实现上下滚动的跑马灯效果。 首先，我们需要理解跑马灯效果的基本原理：它通常是通过改变元素的位置或透明度，模拟出内容持续移动的视觉效果。对于上下滚动的跑马灯，我们需要控制...
【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果，它模拟了新浪微博中图片和文字列表的滚动展示方式，通常用于新闻资讯或者社交媒体的动态展示...
jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现各种动态效果，其中包括文字无缝循环滚动。本篇文章将详细解析如何使用jQuery实现标题中提到的"排名文字无缝循环向上滚动"的效果，并结合给定的文件结构...
接下来，编写jQuery代码来实现文字滚动效果。这里可以使用`animate()`函数来改变文本的`top`或`transform`属性，模拟文字的滚动。一个简单的实现方法是先将所有标题添加到一个看不见的容器，然后逐个将其移动到可视...
在这个例子中，jQuery被用来实现文字列表的滚动功能。首先，我们需要将这个库引入到HTML文件（如101.htm）中，通过`<script>`标签链接到jQuery库，确保页面加载后可以调用其函数。 接下来，我们需要选择要滚动的...
例如，`transform`属性中的`translateY`可以实现文字的垂直移动，配合`animation`或`transition`设定时间，即可达到上下滚动的效果。 二、jQuery简介与应用 jQuery是一个强大的JavaScript库，简化了JavaScript的...
在探讨“js文字间隔滚动上下滚动”的知识点时，我们深入分析了如何利用JavaScript结合jQuery库实现文本元素的动态上下滚动效果。这一技术在网站设计、新闻滚动条、公告栏等场景中极为常见，能有效提升用户体验，使得...
本文将详细介绍如何使用JavaScript和jQuery来实现公告栏内容的自动滚动效果。 首先，我们需要理解公告栏滚动效果的基本原理。在给定文件示例中，公告栏的滚动效果是通过动态修改HTML元素CSS属性（如`marginTop`）来...
标题中的“jquery新浪微博图片文字列表间歇上下滚动淡进淡出滚动”是一个jQuery实现的动态效果，主要用于展示新浪微博上的图片和文字内容。这种效果可以使页面更生动，吸引用户的注意力，通常应用于新闻网站、社交...
使用jQuery实现文字上下无缝滚动，可以大大减少开发时间和代码量。 **实现步骤：** 1. **引入jQuery库**：首先，确保在HTML文档中引入jQuery库。通常，我们通过CDN链接引入，例如： ```html ...
《jQuery实现文字上下滚动插件meuiTextScroll详解》 在网页设计中，动态效果能够提升用户体验，使得信息展示更具吸引力。jQuery作为一个轻量级、功能丰富的JavaScript库，为开发者提供了许多便利。本文将深入探讨...
在JavaScript（JS）中，创建一个实用的带停顿的逐行文本循环滚动效果涉及到多个技术要点，包括HTML布局、CSS样式以及JavaScript的DOM操作和定时器。以下是对这个实例的详细解释： 首先，HTML部分定义了一个`<div>`...
在本主题中，我们主要关注如何使用JS实现图片和文字的无缝滚动效果。 首先，无缝滚动的概念是让内容在到达视口顶部或底部时自动平滑地切换到下一个内容，给用户一种连续无断点的浏览体验。这种效果在网站中常见于...
标题“js 实现上下滚动”涉及的是JavaScript技术在网页中创建上下滚动效果的应用。JavaScript是一种广泛使用的客户端脚本语言，它允许在用户浏览器上动态更新和操作网页内容，无需服务器端交互。在这种情况下，我们...