Use javascript to replace marquee's rolling subtitle effect code

Source: Internet
Author: User

As the number of marquee tags is getting fewer and fewer, most of the rolling effects are implemented using javascript. As for friends who don't understand why they don't use the marquee tag directly, read this article first.
Method 1: use javascript to simulate marquee.
Source: Netease games
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> hot news </title> <style type =" text/css "> </style> </pead> <body> rolling news </ body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Personal Opinion: From the Perspective of web availability, we should take into account the availability in the noscript environment while using this code. We recommend that the content still be in the form of the following edge code on the page. For example:
Copy codeThe Code is as follows:
<Div id = "newslist">
<Ul>
<Li> <a href = http://xyq.163.com/news/2006/11/2-2-20061102170913.html target = _ blank> use "Fantasy secret protection" to quickly retrieve the account password </a> </li>
<Li> <a href = http://ekey.163.com/target = _ blank> Netease General Orders official website </a> </li>
<Li> <a href = http://xyq.163.com/download/wallpaper.htm target = _ blank> latest wallpaper download </a> </li>
<Li> <a href = http://xyq.163.com/download/around.htm target = _ blank> latest screensaver download </a> </li>
</Ul>
</Div>

Then, use the script to hide the settings and read the list items into the array defined in javascript. In the noscript environment, you can view the content list normally.
Method 2: This method is stronger and can automatically scroll left and right based on the content, solving the truncation problem caused by the small width.
Author: Feng zhengren
<Html> <pead> <title> SCROLL </title> <style type = "text/css"> # infozone {font-size: 12px; color: # aa6; overflow: hidden; width: 100px; height: 20px;} # infozone div {height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden ;} </style> </pead> <body> Wen Lan-roof (Jay Chou's Edition) fan Xiaoqi-those flowers, Zhang Shaohan-doll sun Nan & Han Hong-beautiful myth </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Personal Opinion: From the Perspective of xhtml semantics, the abuse of div tags in page content is serious and can be changed to ul/li format.

The third is the most streamlined, with very few code.
Author: cityvoice
<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta name = "Generator "CONTENT =" EditPlus "> <meta name =" Author "CONTENT =" "> <meta name =" Keywords "CONTENT =" "> <meta name =" Description "CONTENT = ""> <style type = "text/css"> # newslist {background: # f7f7f7; border: 1px solid silver; padding: 1px; height: 20px; line-height: 20px; width: 300px ;}# contain {font-size: 12px; overflow: hidden; list-style: none; width: 300px; height: 20px; margin: 0px; padding: 0 ;}# contain li {height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden ;}</style> </HEAD> <BODY> <ul id = "contain"> <li> Wen Lan-roof (left and right swing) </li> <li> fan Xiaoqi-those flowers </li> <li> Zhang Shaohan-doll </li> <li> sun Nan & Han Hong-beautiful myth </li> <li> Zhang xinzhe-bai yueguang </li> </ul> </BODY> </HTML>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
My opinion: It's too short to work. If you like simplicity, you can also consider this.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.