Home Web Front-end JS Tutorial How to achieve text intermittent cycle scrolling effect through JS

How to achieve text intermittent cycle scrolling effect through JS

Jun 05, 2018 pm 05:50 PM
js cycle letter scroll

This article mainly introduces the text intermittent cycle scrolling effect implemented by JS, involving JavaScript combined with time function timing triggering to achieve dynamic operation of page elements and related techniques. Friends in need can refer to the following

The examples of this article describe JS Realized text intermittent cycle scrolling effect. Share it with everyone for your reference, the details are as follows:

The specific code is as follows:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>www.jb51.net - 间歇循环滚动</title>

<style>

#box{

  height:240px;

  width:300px;

  margin:0 auto;

  border:1px solid #0066FF;

  overflow:hidden;

  padding-bottom:20px;

}

#box li{

  color:#333;

  height:24px;

}

#box ul{

  margin:0;

  padding:0;

}

</style>

</head>

<body>

<p id="box">

  <ul id="con1">

    <li>脚本之家1</li>

    <li>脚本之家2</li>

    <li>脚本之家3</li>

    <li>脚本之家4</li>

    <li>脚本之家5</li>

    <li>脚本之家6</li>

    <li>脚本之家7</li>

    <li>脚本之家8</li>

    <li>脚本之家9</li>

  </ul>

</p>

<script>

var area=document.getElementById("box");

area.innerHTML+=area.innerHTML;

var liHeight=24;

area.scrollTop=0;

var delay=2000;

var speed=50;

var time;

function starMove(){

  area.scrollTop++;

  time=setInterval("scrollUp()",speed);

}

function scrollUp(){

  if(area.scrollTop%liHeight==0){

  clearInterval(time);

  setTimeout("starMove()",delay);

  }else{

  area.scrollTop++;

  if(area.scrollTop>=area.offsetHeight/2){

  area.scrollTop=0;

  }

  }

}

setTimeout("starMove()",delay);

</script>

</body>

</html>

Copy after login

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of the four methods of event binding this in react

Use vuex to realize the storage and future of login status Browsing is not allowed in logged-in status, what are the specific methods?

Solve the problem that lower version browsers do not support the import of es6

The above is the detailed content of How to achieve text intermittent cycle scrolling effect through JS. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1662
14
PHP Tutorial
1261
29
C# Tutorial
1234
24
How to make round pictures and text in ppt How to make round pictures and text in ppt Mar 26, 2024 am 10:23 AM

First, draw a circle in PPT, then insert a text box and enter text content. Finally, set the fill and outline of the text box to None to complete the production of circular pictures and text.

How to add dots to text in word? How to add dots to text in word? Mar 19, 2024 pm 08:04 PM

When we create Word documents on a daily basis, we sometimes need to add dots under certain words in the document, especially when there are test questions. To highlight this part of the content, the editor will share with you the tips on how to add dots to text in Word. I hope it can help you. 1. Open a blank word document. 2. For example, add dots under the words &quot;How to add dots to text&quot;. 3. We first select the words &quot;How to add dots to text&quot; with the left mouse button. Note that if you want to add dots to that word in the future, you must first use the left button of the mouse to select which word. Today we are adding dots to these words, so we have chosen several words. Select these words, right-click, and click Font in the pop-up function box. 4. Then something like this will appear

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ​​and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price

How to create a stock candlestick chart using PHP and JS How to create a stock candlestick chart using PHP and JS Dec 17, 2023 am 08:08 AM

How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

Monitor iframe scrolling behavior Monitor iframe scrolling behavior Feb 18, 2024 pm 08:40 PM

How to monitor the scrolling of an iframe requires specific code examples. When we use the iframe tag to embed other web pages in a web page, sometimes we need to perform some specific operations on the content in the iframe. One of the common needs is to listen for the scroll event of the iframe so that the corresponding code can be executed when the scroll occurs. The following will introduce how to use JavaScript to monitor the scrolling of an iframe, and provide specific code examples for reference. Get the iframe element First, we need

The relationship between js and vue The relationship between js and vue Mar 11, 2024 pm 05:21 PM

The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.

See all articles