Horizontal uninterrupted text scrolling implemented by js

The tag I originally thought of was because it enables horizontal scrolling. The manager said that its starting position comes from the far right. Can it be changed to come out from the middle or from the far left? After checking the relevant information, I found out that cannot specify the starting position. Later, I found a piece of code on the Internet, which was implemented using pictures. After I changed the pictures into text, I successfully realized the function I wanted. The code is as follows:

<style type="text/css"> #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-family:'宋体';background:#DDE5ED;color:#0C77CF;font-weight:bold;} #gongao #scroll_begin, #gongao #scroll_end{display:inline} </style> <div id="gongao"> <div style="width:900px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div"> <div id="scroll_begin"> </div> ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} <div id="scroll_end"> </div> </div> </div>
[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

Here ${affiche.content } is the text taken out from the database.

The reason why this multiple repeated text is written in the div of scroll_begin is because the length of these texts must be larger than the div container of scroll_div. If it is smaller than the div, there will be no scrolling effect. In other words: the total width of the content for seamless scrolling must be greater than the width of the container.

Related labels：
letter Horizontal scrolling

source：php.cn

Previous article：Two common ways to pop up a box in Js and return a value_javascript skills Next article：Instructions for using appendChild, insertBefore and insertAfter in JavaScript_javascript skills

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

Latest Articles by Author

What is a NullPointerException, and how do I fix it?

2024-10-22 09:46:29

From Novice to Coder: Your Journey Begins with C Fundamentals

2024-10-13 13:53:41

Unlocking Web Development with PHP: A Beginner's Guide

2024-10-12 12:15:51

Demystifying C: A Clear and Simple Path for New Programmers

2024-10-11 22:47:31

Unlock Your Coding Potential: C Programming for Absolute Beginners

2024-10-11 19:36:51

Unleash Your Inner Programmer: C for Absolute Beginners

2024-10-11 15:50:41

Automate Your Life with C: Scripts and Tools for Beginners

2024-10-11 15:07:41

PHP Made Easy: Your First Steps in Web Development

2024-10-11 14:21:21

Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity

2024-10-11 12:59:11

The Key to Coding: Unlocking the Power of Python for Beginners

2024-10-11 12:17:31

Latest Issues

I failed to follow the teacher’s instructions

From 1970-01-01 08:00:00

0

0

0

An error is reported, hoping that 1 is a string

From 1970-01-01 08:00:00

0

0

0

python3.x - When using the batch start command to run a specified Python script, as long as the path or name of the Python script contains Chinese characters, it cannot be executed. How to solve it?

From 1970-01-01 08:00:00

0

0

0

PHP path reference settings

From 1970-01-01 08:00:00

0

0

0

Regarding the Plates framework, the render() method of rendering templates

From 1970-01-01 08:00:00

0

0

0

Related Topics
More>

How to modify the text in the picture

Reasons why css loading failed

What are the design patterns used by laravel?

python comment shortcut keys

How to use btbook magnetic search

Second-level domain name query method

Win7 prompts that application data cannot be accessed. Solution

What programming language is c language?

Popular Recommendations

what does js mean

How to convert string to array in js?

How to refresh the page using javascript

How to delete an item in js array

How to use sqrt function

Popular Tutorials
More>

Related Tutorials

Popular Recommendations

Latest courses

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1430544

PHP introductory tutorial one: Learn PHP in one week

4283194

JAVA Beginner's Video Tutorial

2604057

Little Turtle's zero-based introduction to learning Python video tutorial

512471

PHP zero-based introductory tutorial

870954

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1430544 times of learning

JAVA Beginner's Video Tutorial

2604057 times of learning

Little Turtle's zero-based introduction to learning Python video tutorial

512471 times of learning

Quick introduction to web front-end development

216526 times of learning

Master PS video tutorials from scratch

906973 times of learning

[Web front-end] Node.js quick start

8693 times of learning

Complete collection of foreign web development full-stack courses

6877 times of learning

Go language practical GraphQL

5760 times of learning

550W fan master learns JavaScript from scratch step by step

768 times of learning

Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours

29424 times of learning

Latest Downloads
More>

Web Effects

Website Source Code

Website Materials

Front End Template

[form button] jQuery enterprise message form contact code

[Player special effects] HTML5 MP3 music box playback effects

[Menu navigation] HTML5 cool particle animation navigation menu special effects

[form button] jQuery visual form drag and drop editing code

[Player special effects] VUE.JS imitation Kugou music player code

[html5 special effects] Classic html5 pushing box game

[Picture special effects] jQuery scrolling to add or reduce image effects

[Photo album effects] CSS3 personal album cover hover zoom effect

[Front-end template] Home Decor Cleaning and Repair Service Company Website Template

[Front-end template] Fresh color personal resume guide page template

[Front-end template] Designer Creative Job Resume Web Template

[Front-end template] Modern engineering construction company website template

[Front-end template] Responsive HTML5 template for educational service institutions

[Front-end template] Online e-book store mall website template

[Front-end template] IT technology solves Internet company website template

[Front-end template] Purple style foreign exchange trading service website template

[PNG material] Cute summer elements vector material (EPS PNG)

[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)

[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)

[PNG material] Golden graduation cap vector material (EPS PNG)

[PNG material] Black and white style mountain icon vector material (EPS PNG)

[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses

[banner picture] Flat style Arbor Day banner vector material (AI+EPS)

[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)

[Front-end template] Home Decor Cleaning and Repair Service Company Website Template

[Front-end template] Fresh color personal resume guide page template

[Front-end template] Designer Creative Job Resume Web Template

[Front-end template] Modern engineering construction company website template

[Front-end template] Responsive HTML5 template for educational service institutions

[Front-end template] Online e-book store mall website template

[Front-end template] IT technology solves Internet company website template

[Front-end template] Purple style foreign exchange trading service website template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved

Horizontal uninterrupted text scrolling implemented by js_javascript skills