Js 每3秒文字向上滚动

最新推荐文章于 2024-06-19 14:56:38 发布
最新推荐文章于 2024-06-19 14:56:38 发布
阅读量3.5k 收藏 13
点赞数 3
分类专栏： Js 前端 文章标签： Js
前端 同时被 2 个专栏收录
132 篇文章 7 订阅
订阅专栏
Js
43 篇文章 0 订阅
订阅专栏

参考：站长素材
在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>每3秒向上滚动</title>
	</head>

	<style type="text/css">
		._container {
			height: 36px;
			overflow: hidden;
			border-bottom: 1px solid #000;
			text-align: center;
			margin: 0;
			padding: 0;
		}

		._container li {
			height: 36px;
			line-height: 36px;
			font-size: 18px;
		}

		._container li:first-child {
			margin-top: 0;
			transition: margin-top .8s;
		}
	</style>

	<body>
		<ul class="_container" id="demo">
			<li>我是第一个出现的</li>
			<li>我是第二个出现的</li>
			<li>我是第三个出现的</li>
			<li>我是第四个出现的</li>
			<li>我要开始循环了(第五个)</li>
		</ul>

	</body>

	<script type="text/javascript">
		function Scroll() {}
		Scroll.prototype.upScroll = function(dom, _h, interval) {
			var dom = document.getElementById(dom);
			var timer = setTimeout(function() {
				var _field = dom.firstElementChild;
				_field.style.marginTop = _h;
				clearTimeout(timer);
			}, 1000)
			setInterval(function() {
				var _field = dom.firstElementChild;
				_field.style.marginTop = "0px";
				dom.appendChild(_field);
				var _field = dom.firstElementChild
				_field.style.marginTop = _h;
			}, interval)
		}
		var myScroll = new Scroll();

		/*这是启动方式*/
		/*
		 * demo 父容器(ul)的id
		 * -36px 子元素li的高度
		 * 3000  滚动间隔时间
		 * 每次滚动持续时间可到css文件中修改
		 */
		myScroll.upScroll("demo", "-36px", 3000);
	</script>
</html>
车家大少爷
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
前端Vue自定义精美上下滚动通告栏组件 常用于展示公告信息 上下滚动跑马灯 上下滚动广播
chenchuang0128的博客
07-04 4805
默认颜色公告栏
移动端实现文字轮播_移动端　文字从下往上每隔３秒滚动一次，且无缝循环滚动，用css3怎么实现？...
weixin_39621819的博客
12-19 735
这个动画效果如果在pc端，那是很容易，如下：function wordMarque(){var wordh=32,timer=null;function noticeMarquee(){$(".todayfocus ul").animate({'margin-top':-wordh},500,function(){$(".todayfocus ul").css('margin-top',0);$(...
css文字向上移动,CSS3创建上下移动的动画效果
weixin_42525387的博客
08-03 2386
上下移动.a{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;width:200px;height:200px;background-color:#000000...
js如何实现文字向上滚动效果？
weixin_44712870的博客
07-15 1892
可以使用定时器来实现，定时任务是将显示区域的scrollTop属性+1。 直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现文字向上滚动效果</title> </head> <body> <div id="showArea" style="width: 150px;height: 50
CSS实现文字上下滚动、间歇滚动和无限滚动
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
06-19 745
主要记录了用CSS实现文字上下滚动、间歇滚动和无限滚动效果
利用CSS3实现的文字定时向上滚动
09-24
大家以前基本是用Javascript来实现文字定时向上滚动的效果，那么今天小编给大家分享下利用CSS3来实现这一效果，有需要的可以参考学习。
前端实现无限循环滚动三种方式（react hooks示例）：js || css || 插件
希望我快乐
05-07 9298
滚动数据根据需要改为图片或html元素，或者从接口读取数据组装元素 横向滚动，修改容器宽高，将 scrollTop 改为 scrollLeft 渲染数据变化时，或者在模态框作渲染等依据一些外在条件变化需要重新渲染时，必须清除所有定时器 封装组件使用，需考虑：依赖项，滚动方向，速率，每条数据渲染形式 import { useState, useEffect, useRef } from 'react' // 定时器 let intervalTimer, timeoutTimer const Index.
JS实现排行榜文字向上滚动轮播效果
10-15
标题中的“JS实现排行榜文字向上滚动轮播效果”是指使用JavaScript编程语言来创建一个动态展示排行榜的文本滚动效果，文字会沿着垂直方向向上滚动，类似于常见的新闻滚动条。这种效果常用于显示有限空间内的大量信息...
js实现文字无缝向上滚动
10-20
本文主要分享了js实现文字无缝向上滚动的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
js+css3文字上下滚动切换动画特效
06-11
总的来说，"js+css3文字上下滚动切换动画特效"是一个结合了前端两种核心技术的实践案例，展示了如何通过JavaScript的动态控制与CSS3的动画效果，创造出引人注目的网页交互体验。无论是用于网站标题、通知栏还是其他...
简单js文字向上滚动事件
10-11
三种js文字向上滚动效果，简单实用，代码精简容易上手
js 停顿一秒_js实现文字向上滚动，并且每滚动一行停顿几秒的效果_蓝戒的博客...
weixin_35725821的博客
12-24 1007
前端工程师的一般性特点:1.技术控，会前端，也会一门非前端语言。2.对异性的期望较高但是实际情况相反。3.对IE系列尤其是IE6同仇敌忾。4.很多人多才多艺，但不经常炫出来。5.喜欢尝试新鲜东西，尤其是互联网产品。6.陌生场面会比较内敛，但是大多内心热情，用一个词也可以说是闷骚。7.工作之余时间在电脑面前呆得比较多。8.身体素质一般。源码实例：[codesyntax lang="php"]<...
javascript 5秒钟刷新和页面title滚动
can_Sunshine的博客
09-25 516
Hello,节点属性,你真棒,Hi,Hi~   //刷新，重新加载     var d1 = document.getElementById("d1");     var i=0;     function sx(){         if(i>=5){             document.location.reload();         }      
javaScript小案例------js实现文字滚动效果篇
前端叶荨，随手记
04-06 7850
原生js实现文字滚动效果
div定时动态滚动列表
qq_39520338的博客
12-11 902
示例 每3秒列表向下滚动一行，每行高度为32，触底或触顶后自动反向滚动! 以下为调用方法 autoScroll(32,32,3000,document.getElementById('hyjbqk')); /** * stepLength：一次滚动步长 * speed：滚动速度 * delay：停留时间 * element：Element对象 * * element.offsetHeight 元素的像素高度（包括边框和填充） * el
Javascript设置滚动条向上滚动的方法；JS设置滚动条滚动的代码
huaihuai_huang的博客
05-08 3016
很久就没有碰前端的后果就是，自己被公司叫来帮忙自己结果啥都会，但是就想不起怎么操作 画布哆嗦，咱们直接来看代码 重点一：获取滚动条Y轴的数据 这个方法有很多，我就不一一讲述了，毕竟结果都一样就好 直接上代码 var scrollTop = 0; window.onscroll = function () { scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log(scroll
用js实现字幕滚动效果.
Welcome to Chandler.C's blog
11-23 5527
"http://www.w3.org/TR/html4/loose.dtd">无标题文档 链接一 链接二 链接三链接四 　　　　　　　　　　marqueesWidth=500; //内容区宽度度　　　　stopscroll=false; //这个变量控制是否停止滚动　　　　with(marquees){　　　　noWrap=true; //这句表内容区不自动换行　　　　style.width=m
原生JS 实现字幕滚动
小肉包的博客
11-11 2177
原生JS 实现字幕滚动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动字幕</title> <style> #marquee { color: red; display: block; width: 96%; h
vue文字向上循环滚动
12-10
Vue文字向上循环滚动可以通过使用Vue.js的transition组件和CSS3的动画来实现。首先，我们需要在Vue组件中创建一个包含需要滚动的文字的容器，并使用transition组件包裹这个容器。接下来，我们可以利用Vue的data属性来设定文字的滚动位置，并且在created生命周期钩子中设置一个定时器来不断更新文字的滚动位置，实现循环滚动效果。在CSS中，我们可以利用@keyframes规则来定义文字向上滚动的动画效果，然后将这个效果应用到文字容器上。最后，我们在Vue组件中引用这个CSS动画，使得文字容器能够实现向上循环滚动的效果。通过以上步骤，我们就可以实现Vue文字向上循环滚动的效果。这样不仅可以满足网页设计中一些特殊的文字展示需求，也可以丰富页面的交互体验，为用户带来更好的视觉享受。希望这个回答能够帮助到你，如果有任何疑问，欢迎随时向我提出。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值