【前言】
纯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实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用，主要用于创建一种视觉上连续、无中断的文字滚动展示，常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息，而不会显得拥挤。...
jQuery 实现文字上下滚动
根据提供的标题、描述、标签及部分内容，我们可以了解到这段材料主要涉及一种基于jQuery的逐行定期滚动JavaScript代码。接下来，我们将详细解析这些信息所涵盖的知识点。 ### 一、逐行定期滚动JS代码概述 逐行定期...
标题中的“jQuery Bootstrap响应式新闻列表文字上下滚动特效”指的是使用jQuery库和Bootstrap框架来创建一个适应不同设备屏幕尺寸的新闻列表，同时实现文字的上下滚动效果。这种特效常见于网站的新闻或更新部分，...
本文将详细介绍如何用JavaScript实现上下滚动的跑马灯效果。 首先，我们需要理解跑马灯效果的基本原理：它通常是通过改变元素的位置或透明度，模拟出内容持续移动的视觉效果。对于上下滚动的跑马灯，我们需要控制...
【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果，它模拟了新浪微博中图片和文字列表的滚动展示方式，通常用于新闻资讯或者社交媒体的动态展示...
接下来，编写jQuery代码来实现文字滚动效果。这里可以使用`animate()`函数来改变文本的`top`或`transform`属性，模拟文字的滚动。一个简单的实现方法是先将所有标题添加到一个看不见的容器，然后逐个将其移动到可视...
例如，`transform`属性中的`translateY`可以实现文字的垂直移动，配合`animation`或`transition`设定时间，即可达到上下滚动的效果。 二、jQuery简介与应用 jQuery是一个强大的JavaScript库，简化了JavaScript的...
7. **js**：这个目录可能包含了所有必要的JavaScript文件，包括jQuery库本身以及实现文字滚动效果的自定义脚本。 在实现jQuery文字向上滚动时，主要涉及的技术点可能包括： 1. **DOM操作**：jQuery提供了一系列方便...
在本主题中，我们将深入探讨如何利用JS实现文字间隔性滚动的效果，这种效果常见于网站的新闻标题滚动，使得信息展示更加动态且节省空间。 一、基本原理 文字间隔性滚动通常是通过改变文本元素的位置来实现的。JS...
本文将详细介绍如何使用JavaScript和jQuery来实现公告栏内容的自动滚动效果。 首先，我们需要理解公告栏滚动效果的基本原理。在给定文件示例中，公告栏的滚动效果是通过动态修改HTML元素CSS属性（如`marginTop`）来...
标题中的“jquery新浪微博图片文字列表间歇上下滚动淡进淡出滚动”是一个jQuery实现的动态效果，主要用于展示新浪微博上的图片和文字内容。这种效果可以使页面更生动，吸引用户的注意力，通常应用于新闻网站、社交...
一旦引入jQuery，你可以编写JavaScript代码来实现文字滚动。一种简单的方法是使用`animate()`函数，它可以改变CSS属性，如`top`或`bottom`，以创建滚动效果。以下是一个基本的示例： ```javascript $(document)....
（鼠标移入，滚动停止；鼠标移出，滚动继续） 实现原理 1. html结构：核心是ul > li，ul外层包裹着div。因为想要内容循环滚动无缝衔接，所以在原有ul后面还要有一个一样内容的ul。如下图： （红色边框为可视...
"js 上下(左右)图片滚动"就是一种常见的动态展示技术，它利用JavaScript实现图片的自动滚动，为网站增添活力。在这个主题中，我们将深入探讨如何利用JavaScript实现图片的上下滚动和左右滚动效果。 首先，我们要...
标题“js 实现上下滚动”涉及的是JavaScript技术在网页中创建上下滚动效果的应用。JavaScript是一种广泛使用的客户端脚本语言，它允许在用户浏览器上动态更新和操作网页内容，无需服务器端交互。在这种情况下，我们...
标题中的“一个jQuery广告文字上下滚动效果”是指利用JavaScript库jQuery实现的一种动态展示文本的特效，常见于网站的广告栏或者新闻滚动条。这种效果可以让文字以上下滚动的方式吸引用户的注意力，增加信息的可见性...
在"jQuery实现文字上下滚动插件meuiTextScroll.zip"中，我们可以推测这包含了一个利用jQuery来创建文字滚动效果的插件。这个插件可能被用于网页设计，特别是在新闻、公告或者广告展示等场景，让文字按照设定的方向...
本文实例讲述了JS简单判断滚动条的滚动方向实现方法。分享给大家供大家参考，具体如下： 以下代码实现判断页面的滚动条的滚动方向； var sign = 80;//定义默认的向上滚与向下滚的边界 [removed] = [removed] = ...
要实现文字逐行向上间歇滚动的效果，我们可以使用jQuery库中提供的多种方法和函数。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，使得在网页中实现动态效果变得简单...