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