js實現的單行文本不間斷無縫滾動效果（熒光屏文字 滾動效果）

原創 Return_KB 2020-02-20 14:02

本章節介紹一下如何利用原生javascript實現但行文本的不簡單無縫滾動效果。

這種效果在大量的網站都有使用，站點的公告或者其他功能一般會採用這種形式，下面就通過代碼實例簡單介紹一下。

代碼如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>熒光屏文字
滾動效果</title> 
<style type="text/css">
#scrollobj{
  white-space:nowrap;
  overflow:hidden;
  width:200px;
  margin:50px;
}
</style>
<script type="text/javascript">
function scroll(obj){
  var tmp=(obj.scrollLeft)++;
  if(obj.scrollLeft==tmp){
    obj.innerHTML += obj.innerHTML;
  }
  if(obj.scrollLeft>=obj.firstChild.offsetWidth){
    obj.scrollLeft=0;
  }
}
setInterval("scroll(document.getElementById('scrollobj'))",20);
</script>
</head>
<body>
<div id="scrollobj">歡迎您，只有努力奮鬥纔會有美好的未來。</div>
</body>
</html>





























Return_KB



發佈了7 篇原創文章 · 獲贊 11 · 訪問量 10萬+





私信

關注

















發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








前端js Aes對本地存儲數據進行加密解密






1、npm install crypto-js
2、編寫LocalStorage類
const CryptoJS = require('crypto-js');
class LocalStorage {
construct






 IT~少年人

2020-07-08 00:02:52









JavaScript 獲取當前站點的域名和端口號






例：本地IP形式：  http://127.0.0.1:8083/admin          線上域名： https://www.csdn.net/
獲取域名（第一種方法）：location.host   =    127.0.0.1:






 花化世界

2020-06-30 05:30:26









ajax異步下載文件並判斷狀態






今日需要對公司的代碼進行更新，發現之前有的文件丟失導致下載不到直接跳轉到一個空的頁面，第一反應是應該沒有用異步請求，直接用a標籤或者表單之類的處理下載文件請求了。
但是ajax似乎是不支持下載文件的，會把流信息當初文本類處理。。。自然不能






 哔哔小子

2020-06-27 23:32:30









ajax請求實用的封裝方法






個人身爲一個java後端開發，對js的閉包簡單理解爲跨方法訪問變量值，放到java裏就是方法A能使用方法B中的變量。
今天寫代碼時看到公司之前同事寫的ajax到處都是，沒有任何封裝，需要優化一下。
 
項目中的ajax到處都是這類代碼：






 哔哔小子

2020-06-27 23:32:30









Js實時監聽input輸入框值變化






<input oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" >
<script>
// 監聽input輸入框信






 itfallrain

2020-06-26 15:58:21









VUE 常規截取和特殊字符之前之後截取






1：平常使用的
let str = 'abcdef';
// 0
str = str.slice(0);//返回整個字符串 abcdef
str = str.substring(0);//返回整個字符串 abcdef
st






 itfallrain

2020-06-26 15:58:16









Vue怎麼判斷對象是否爲空






1: Vue怎麼判斷對象是否爲空
JSON.stringify(evtValue)=='{}'
Object.keys(xxxx).length==0
2:js判斷對象是否爲空對象的幾種方法
1.將json對象轉






 itfallrain

2020-06-26 15:58:16









firefox下JS動態創建的form表單元素獲取不到值的問題






今天遇到個問題，在Firefox下用Javascript動態創建input元素，在服務器端獲取不到值。
我一點點的刪代碼，刪到最後才發現嵌套的問題。
<table>
<form>
<tr><td></td></tr>
......
<






 超级马里奥2020

2020-06-26 15:44:19









JavaScript圓形鐘錶效果代碼實例






分享一段代碼實例，它實現了利用js實現了自動讀取本地時間的圓形鐘錶效果。
代碼實例如下:
0010020030040050060070080090100110120130140150160170180190200210220230






 Return_KB

2020-06-24 23:20:33









js點擊當前鏈接背景變色其他鏈接恢復原來背景色






可能大家都見過這樣的效果，點擊一個鏈接背景會變色，當再點擊其他鏈接的時候，之前被點擊的鏈接背景顏色又會恢復。下面就通過代碼實例介紹一下如何實現此效果。
代碼如下:
[HTML] 純文本查看 複製代碼運行代碼010203040506






 Return_KB

2020-06-24 23:20:33









商品搶購倒計時效果






現在比較流行商品搶購活動，爲了達到比較人性化的效果，通常有一個倒計時。
下面分享一個比較簡陋的商品搶購倒計時效果。
代碼實例如下:
010203040506070809101112131415161718192021222324






 Return_KB

2020-06-24 23:20:22









springboot開發環境下搭建ftp+nginx圖片服務器以及其他文件的存儲






一、在搭建一個ftp服務器用於存儲文件
二、下載nginx，安裝完成後更改配置文件
server {
listen 80;
server_name localhost;
#






 Return_KB

2020-06-24 23:20:10









前端jq實現中英文切換（i18n國際化方式，apicloud打包後也適用）






1.項目文件及目錄
2.準備js
github下載地址：https://github.com/T-baby/jquery.i18n/releases
3.頁面代碼
<!DOCTYPE html>
<html>
<hea






 木易66丶

2020-06-23 21:55:52









Ecahrts餅圖參數詳解






https://blog.csdn.net/sleepwalker_1992/article/details/82532210






 木易66丶

2020-06-23 14:11:52









js粒子特效——particles






鏈接：https://pan.baidu.com/s/1KqsZ5I8Qjz_J7ysQtw8tMw 
提取碼：qy38 
1.下載並引入particles.js
2.<div class="linebox"><div id="parti






 木易66丶

2020-06-23 14:11:39