Home > Developer > JavaScript
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
