Marquee tag, Trojan lights, continuous blank-free playback effect, pure CSS (effective for chrome opera), marqueechrome
Marquee does not seem to have any attribute set for playing at the beginning or end. When the content is scrolled, there is always a gap in the length of marquee, which is inconvenient in some cases;
After a while, the key points of a solution are as follows:
1. Copy the content to be rolled and place it at the beginning and end of the same line. Assume that the length of the content to be rolled is X, and set the length of marquee to x/2;
2. Absolute positioning of the content of marquee, left is-x/2;
PS: firefox 37.0.2 does not scroll at all, and there will still be gaps in ie 11;I hope someone can solve the compatibility problem between the two browsers.
The Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> marquee tag: continuous playback without blank space (CSS for chrome opera) </title> <style type = "text/css"> div {width: 360px; height: 200px; margin: 0 auto; background: # CF9;} marquee {position: relative; width: 360px; height: 100px; overflow: hidden; }# marquee1 {background: # CCC ;}# marquee2 {background: #999;} a {display: block; width: 720px; text-decoration: no Ne; color: #666; font: 40px/40px 'microfost yahei', SimSun; background: # FC0 ;}# marquee1> a {position: absolute; z-index: 99; left:-360px; top: 0 ;} </style>
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
