Horizontal uninterrupted text scrolling implemented by js_javascript skills

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.

Statement：

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

Previous article：Two common ways to pop up a box in Js and return a value_javascript skillsNext article：Two common ways to pop up a box in Js and return a value_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

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

About usDisclaimerSitemap

© php.cn All rights reserved