Home > Developer > JavaScript
As the number of marquee labels is getting fewer and fewer, most of the scrolling effects are implemented using javascript.
Marquee is abandoned because marquee is a theme that seriously affects user experience. compressing dozens of lines of content to several rows of scrolling helps you compress the typographical space, but have you ever thought that users may have to wait for half a day on your scroll because they want to read one or two lines of content? Take the aggregation text scroll on the right of the advertisement text on the top of the "BlogBeta Digital Engine p4 3.0 server for 6999 RMB/year" on the classic forum page as an example. Do you think this is a good user experience? Are W3C experts not as considerate as a group of ignorant little p-kids? It's a joke.
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:
Program code
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
HTML code
<! 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
