JavaScript 一個文字跑馬燈程式碼實現可以設定文字內容、左右滾動方向、文字大小和顏色、滾動速度

阿新 • • 發佈：2018-12-11

JavaScript 一個文字跑馬燈程式碼實現，可以設定文字內容、左右滾動方向、文字大小及顏色、滾動速度，暫停和繼續播放。這是一個比較簡單，甚至完全可以用css實現，其實就是滿足小朋友興趣愛好寫的這麼一個demo。看似簡單，其實這裡還是有些實現細節需要注意，所以就跟大家分享下。

1、頁面截圖

在這裡插入圖片描述

操作說明：
1）可以設定文字滾動方向、滾動速度，文字顏色、大小，文字滾動內容，點選“確定”按鈕即可生效，並重新播放；
2）確定按鈕右側的小按鈕：暫停／播放

點暫停，按鈕圖示顯示為播放圖示，暫停播放；
點播放，按鈕圖示顯示為停止圖示，繼續播放；

2、頁面程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字跑馬燈效果</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" 
 />
    <style type="text/css">
    	.w100{width: 100px!important}
    	.w200{width: 200px!important}
    	.form-horizontal .form-group{margin-right:0; margin-left:0;}
    	.form-group-np .col-xs-1,
		.form-group-np .col-xs-2{ padding-right: 0; padding-left: 0; }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" 
></script>
</head>
<body>
<div align="center" id="demo" style="overflow:hidden; width:620px; margin: 50px auto;">
    <div id="words-wrap" style="border: 1px solid #000; position:relative; overflow:hidden; height: 60px; margin-bottom: 15px;">
    	<div id="words" style="line-height:60px; font-weight:bold; position:absolute; display:inline-block; width: auto; white-space:nowrap;">
    		HTML5是一個豐富的應用，可以給使用者很多視覺上的享受！
    	</div>
    </div>
	<div class="form-horizontal" style="border: 1px solid #ddd; padding-top:15px;">
		<div class="form-group form-group-sm form-group-np clearfix">
		    <label class="col-xs-2 control-label w100">滾動方向：</label>
			<div class='col-xs-2 w200'>
				<select id="gd_fx" class="form-control input-sm">
					<option value="ltr">從左向右</option>
					<option value="rtl" selected>從右向左</option>
				</select>
			</div>			
			<label class="col-xs-2 control-label w100">滾動速度：</label>
			<div class="col-xs-2 w200">
				<select id="gd_speed" class="form-control input-sm">
					<option value="200">很快</option>
					<option value="300">快</option>
					<option value="500" selected>適中</option>
					<option value="1000">慢</option>
					<option value="2000">很慢</option>
				</select>				
			</div>
		</div>
		<div class="form-group form-group-sm form-group-np clearfix">
			<label class="col-xs-2 control-label w100">文字顏色：</label>
			<div class='col-xs-2 w200'>
				<input id="font_color" type="color" class="form-control input-sm" placeholder="文字顏色" value="#ff0000" />
			</div>
			<label class="col-xs-2 control-label w100">文字大小：</label>
			<div class='col-xs-2 w200'>
				<select id="font_size" class="form-control input-sm">
					<option value="14px">14px</option>
					<option value="16px" selected>16px</option>
					<option value="18px">18px</option>
					<option value="20px">20px</option>
					<option value="24px">24px</option>
					<option value="30px">30px</option>
				</select>
			</div>					
		</div>
		<div class="form-group form-group-sm form-group-np clearfix">
			<label class="col-xs-2 control-label w100">文字大小：</label>
			<div class='col-xs-2' style="width: 500px;">
				<input id="words_desc" type="text" class="form-control input-sm" placeholder="文字描述"></input>
			</div>
		</div>
		<div class="form-group form-group-sm form-group-np clearfix">
			<div class='col-xs-2' style="width: 100%; padding:0 18px;">
				<button type="button" class="btn btn-primary" style="width:535px" onclick="start();">
					<span class="fa fa-check" style="margin-right: 5px;"></span>確 定</button>
					
				<button type="button" class="btn btn-default" style="width:40px;" onclick="stopOrPlay(this);">
					<span class="fa fa-stop"></span></button>
			</div>
		</div>
	</div>
</div>
<script language="javascript" type="text/javascript">
	var interval = 0, step = 20, tw = 620, twpx = "620px";
	var gd_fx = $("#gd_fx").val(), gd_speed = $("#gd_speed").val();
	var $words = $("#words"), words_width = $("#words").outerWidth();
	
	var marquee = function () {
		var v = 0;
		if(gd_fx == "ltr") {
			v = parseFloat($words.css("right")) - step;
			$words.css("right", v);
			if(v + words_width < 0) {
				$words.css("right", tw);
			}
		} else {
			v = parseFloat($words.css("left")) - step;
			$words.css("left", v);
			if(v + words_width < 0) {
				$words.css("left", tw);
			}
		}
	}	
	function start() {
		if(interval) clearInterval(interval);
		
		var font_color = $("#font_color").val() || "red";
		var font_size = $("#font_size").val();
		var words_desc = $("#words_desc").val() || "HTML5是一個豐富的應用，可以給使用者很多視覺上的享受！";
		gd_fx = $("#gd_fx").val(), gd_speed = $("#gd_speed").val();
		//
		$words.text(words_desc);
		words_width = $words.outerWidth();
		if(gd_fx == "ltr") {
			$words.css({right: twpx, left:"auto"});
		} else {
			$words.css({left: twpx, right:"auto"});
		}
		$words.css({"font-size": font_size, "color": font_color});
		
		interval = setInterval(marquee, gd_speed); 
	}
	function stopOrPlay(obj) {
		var $fa = $(obj).find(".fa");
		if($fa.hasClass('fa-stop')) {
			$fa.removeClass('fa-stop').addClass('fa-play');
			if(interval) clearInterval(interval);
		} else {
			$fa.removeClass('fa-play').addClass('fa-stop');
			if(interval) clearInterval(interval);
			interval = setInterval(marquee, gd_speed); 
		}
	}
	$(function() {
		start();
	});
</script>
</body>
</html>

3、細節及注意事項

1）原材料：使用了jquery, bootstrap, fa圖示；
2）技術點：

css 改變absolute定位的left, right實現文字左右滾動；
setInterval, 定時器使用

3）小細節：

div內容自適應寬度css處理，見 #words
jquery css賦值，取值，具體看js程式碼
words.css({left: twpx, right:“auto”});
v = parseFloat(words.css(“right”)) - step;
words.css(“left”, tw);
暫停/播放，一個按鈕實現2個行為的切換
demo是用class做標記來處理的

JavaScript 一個文字跑馬燈程式碼實現可以設定文字內容、左右滾動方向、文字大小和顏色、滾動速度

JavaScript 一個文字跑馬燈程式碼實現，可以設定文字內容、左右滾動方向、文字大小及顏色、滾動速度，暫停和繼續播放。這是一個比較簡單，甚至完全可以用css實現，其實就是滿足小朋友興趣愛好寫的這麼一個demo。看似簡單，其實這裡還是有些實現細節需要注意，所以就跟大家分享下。 1、頁面

使用javascript的substr實現文字跑馬燈

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

前端實現文字跑馬燈的三種方式

前言最近寫了一個文字跑馬燈的專案需求，剛開始用js寫，能夠完成需求。後面想著換種方式(分別是html和css)來實現同一個需求,以減少效能消耗。首先，需求分析: 需求點1.判斷文字的長度和容器的長度，如果文字長度大於容器長度則開始滾動，否則不滾動；需求點2.判斷滾動滾動的結束，在結束的時間點觸發

Android 中一個簡單垂直跑馬燈的實現

記錄一個Android中簡單實現垂直跑馬燈功能的方法：實現了垂直跑馬燈的功能。記錄一下以便日後檢視：首先在MainActivity下新建一個名為 ScrollTextView的.java 檔案

Android Studio一個簡單橫向跑馬燈的實現

記錄一個Android中簡單實現跑馬燈功能的方法：僅僅實現了單行跑馬燈的功能，對於速度的調整，沒有實現。記錄一下以便日後檢視。首先在MainActivity下新建一個名為MarqueeTextView的.java 檔案

文字跑馬燈的CSS實現

使用 transform:perspective(300px) rotateY(-67.3deg); perspective 屬性定義 3D 元素距檢視的距離，與 perspective-origin 屬性一同使用該屬性，就能夠改變 3D 元素的底部位置。

文字跑馬燈效果程式碼

<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="@android:color/white" android:focusable="tru

實現一個垂直跑馬燈的效果（垂直公告）

實現一個簡單的跑馬燈的效果，類似於App裡面的通知：恭喜XXX獲得了什麼什麼的效果。首先先匯入兩個工具類 import android.app.Activity; import android.content.Context; import and

html跑馬燈程式碼大全(圖片文字移動程式碼)

<marqueebehavior=slide>...</marquee>滑動 <marqueebehavior=scroll>...</marquee>預設捲動 <marqueebehavior=alternate>...</marquee&

vue文字跑馬燈效果

star lis using obia dir ng- visible tick cdn https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({

VUE之文字跑馬燈效果

文字 utf button doctype put inpu stop title set <!DOCTYPE html> Title <input type="button" value="浪起來"

Vue 文字跑馬燈效果

1. 話不多說看程式碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

微信小程式：公告字幕滾動播放（文字跑馬燈效果）

一、需求公告文字僅限200字公告內容僅限一行文字顯示公告內容持續滾動二、解決思路使用動畫API（Animation.translate），完成移動動畫使用定時器API（setInterval）,完成迴圈播放動畫注

微信小程式-文字跑馬燈效果

效果如圖 WXML <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view class=

微信小程式文字跑馬燈效果

WXML <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view cla

JS寫一個列表跑馬燈效果--基於touchslide.js

先放上效果圖：類似於這樣的，在列表中迴圈新增背景樣式的跑馬燈效果。準備引入JS外掛： <script type="text/javascript" src="xxx/2017mobile/j

簡單文字跑馬燈/popupwindow

自定義一個View繼承TextView public class MarqueeTextView extends TextView{ public MarqueeTextView(Context context) { super(context); }

Java 簡單的文字跑馬燈特效

package com.image import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit

JS 跑馬燈效果實現（很好用）

實現跑馬燈效果的JS很多，但是很多不好用，下面介紹一個比較好用的。好用之處在於： 1 支援一個頁面多個跑馬燈效果 2.支援跑馬燈內容的非同步載入關鍵的實現程式碼，如果看不懂，可以跑這個列子 <body><ul id="RunTopic"><

一個 11 行 Python 程式碼實現的神經網路

概要：直接上程式碼是最有效的學習方式。這篇教程通過由一段簡短的 python 程式碼實現的非常簡單的例項來講解 BP 反向傳播演算法。程式碼如下： Python 1234567891011X=np.array([

JavaScript 一個文字跑馬燈程式碼實現 可以設定文字內容、左右滾動方向、文字大小和顏色、滾動速度

1、頁面截圖

2、頁面程式碼

3、細節及注意事項

相關推薦

JavaScript 一個文字跑馬燈程式碼實現可以設定文字內容、左右滾動方向、文字大小和顏色、滾動速度