JavaScript 自定义自动滚动文字，两种方式

爱被打了一巴掌 2022-05-28 01:52 436阅读 0赞

TextAutoScroll.js

function TextAutoScroll() {
    	var _this = this;
    	this.ScrollTypeEnum = {
    		LeftRight: 0,//左右滚动
    		Left: 1,//像左滚动
    	};
    	this.space = 4;//文本添加的空格数
    	var spaceStr = "";
    	this.speed = 20;//速度
    	this.ScrollEndStopTime = 800;//滚动到尽头停止的时间
    	
    	this.startScroll = function(element, scrollTypeEnum) {
    		for(var i=0; i<_this.space;i++) {
    			spaceStr += " ";
    		}
    		element.style.whiteSpace = "nowrap"; //文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
    		element.style.overflow = "hidden"; //内容会被修剪，并且其余内容是不可见的。
    		if(scrollTypeEnum == _this.ScrollTypeEnum.LeftRight) {
    			LeftRight(element);
    		} else {
    			Left(element);
    		}
    	}
    
    	function LeftRight(element) {
    		var isRight = false;
    		element.innerHTML = spaceStr + element.innerHTML + spaceStr;
    		if(element.scrollWidth > element.clientWidth) {
    			LeftRightTime(element, isRight);
    		}
    	}
    
    	function LeftRightTime(element, isRight) {
    		var interval = setInterval(function() {
    			if(!isRight) {
    				element.scrollLeft = element.scrollLeft + 1;
    				if(element.scrollLeft >= element.scrollWidth - element.clientWidth) {
    					isRight = true;
    					clearInterval(interval);
    					setTimeout(function() {
    						LeftRightTime(element, isRight);
    					}, _this.ScrollEndStopTime);
    				}
    			} else {
    				element.scrollLeft = element.scrollLeft - 1;
    				if(element.scrollLeft == 0) {
    					isRight = false;
    					clearInterval(interval);
    					setTimeout(function() {
    						LeftRightTime(element, isRight);
    					},  _this.ScrollEndStopTime);
    				}
    			}
    		}, _this.speed);
    	}
    
    	function Left(element) {
    		var oldScrollWidth = element.scrollWidth;
    		element.innerHTML = element.innerHTML + spaceStr + element.innerHTML;
    		if(element.scrollWidth > element.clientWidth) {
    			LeftTime(element, oldScrollWidth);
    		}
    	}
    
    	function LeftTime(element, oldScrollWidth) {
    		var interval = setInterval(function() {
    			element.scrollLeft = element.scrollLeft + 1;
    			if(element.scrollLeft >= oldScrollWidth) {
    				clearInterval(interval);
    				element.scrollLeft = 0;
    				setTimeout(function() {
    					LeftTime(element, oldScrollWidth);
    				},  _this.ScrollEndStopTime);
    			}
    		},  _this.speed);
    	}
    }

使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    	<head>
    		<meta charset="utf-8">
    	</head>
    
    	<body>
    		<div id="text" style="width:180px;height:auto;">JavaScript  自定义自动滚动文字，两种方式</div>
    
    		<script src="libs/TextAutoScroll.js"></script>
    
    		<script type="text/javascript">
    			var text = document.getElementById("text");
    			var textAutoScroll = new TextAutoScroll();
    			textAutoScroll.startScroll(text, textAutoScroll.ScrollTypeEnum.LeftRight);
    		</script>
    	</body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，436人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java——Arrays.sort自定义排序两种方式

Comparable接口是你要进行排序的数据结构或者说对象所对应的类需要实现的接口，缺点是只能按你实现的这一种方式排序： public class Use

柔情只为你懂/ 2023年06月10日 04:25/ 0 赞/ 22 阅读

相关 Android文字广告，自定义垂直滚动切换TextView

很多app的首页都会有一个用于显示热点消息的banner，通过垂直切换文本的方式动态展示消息。垂直切换的方式可以有效利用空间显示更多的内容，动态的效果也更能吸引用户的注意力。

青旅半醒/ 2022年12月10日 14:34/ 0 赞/ 176 阅读

相关 Openlaszlo中发送自定义事件的两种方式

在事件驱动的RIA客户端中，自定义事件是应用内部通讯的重要手段，以前不知道事件的重要性，程序中的耦合现象严重，直到前段事件才意识到这个问题。现在整理个小例子给大家，尤其是新手看

梦里梦外;/ 2022年09月18日 09:51/ 0 赞/ 135 阅读

相关自定义异常的两种处理方式实现

public class NewException extends Exception { public NewException()

客官°小女子只卖身不卖艺/ 2022年08月27日 03:55/ 0 赞/ 147 阅读

相关［自定义组件之二］两种方式改造UIView

import <UIKit/UIKit.h> @class MyUIViewWithDelegate; @class MYUIViewWithEvent

淩亂°似流年/ 2022年08月20日 12:18/ 0 赞/ 145 阅读

相关 Qt:QML:文字自动滚动

文字自动滚动效果 ![这里写图片描述][SouthEast] 代码 import QtQuick 2.5 import QtQuick.Windo

小灰灰/ 2022年07月12日 17:52/ 0 赞/ 236 阅读

相关 andorid封装自动滚动TextView，没有焦点，有两种滚动方式

为了解决使用原生自动滚动的TextView，在ListView上item不能点击，是因为获取焦点所以不能点击，还有就是只有一种方式的滚动。关于ScreenUtils [点击

偏执的太偏执、/ 2022年06月10日 14:14/ 0 赞/ 192 阅读

相关 ios自动滚动UILabel，跑马灯，有两种滚动方式

主要代码： KJMarqueeLabel.h import <UIKit/UIKit.h> typedef NS_ENUM(NSUInteg

短命女/ 2022年06月09日 06:00/ 0 赞/ 449 阅读

相关 SpringBoot之自定义异常的两种方式-yellowcong

> Springboot异常的处理，可以通过一下几种方法，1、使用@ControllerAdvice来进行统一异常处理，@ExceptionHandler(value = Ex

分手后的思念是犯贱/ 2022年05月28日 13:14/ 0 赞/ 230 阅读

相关 JavaScript 自定义自动滚动文字，两种方式

TextAutoScroll.js function TextAutoScroll() { var _this = this; this.Scro

爱被打了一巴掌/ 2022年05月28日 01:52/ 0 赞/ 437 阅读