Home > Developer > Web Develop
Many times it's hard to read someone's code. There are many reasons, sometimes may be impatient, at this time to see the implementation of the principle of quickly understand the content of the code, so add some comments, so that others can see understand, sometimes because of limited knowledge is not understand, even if the code is very simple, this need to learn more
<!DOCTYPE HTML><HTML><Head> <title>Scrolling Announcements</title> <MetaCharSet= "Utf-8"/> <styletype= "Text/css"> *{padding:0px;margin:0px; }#container{Border:1px Yellow Solid;width:500px;Height:30px;Line-height:30px;Overflow:Hidden; }. Content{width:500px; } </style></Head><Body><DivID= "Container"> <DivID= "Content"class= "Content"> <ahref=# ID= "F12red1"class= "F12red">1111111111111111111111111111111111111111</a><BR/> <ahref=# class= "F12red">222222222222222222222222222222222222222222</a><BR/> <ahref=# class= "F12red">33333333333333333333333333333333333333333333</a><BR/> </Div> <DivID= "Content1"class= "Content"></Div></Div><Scripttype= "Text/javascript"src= "Js/jquery-1.12.0.min.js"></Script><Scripttype= "Text/javascript"> //copy content to Content1 $("#content1"). HTML ($ ("#content"). HTML ()); //the implementation of the seamless scrolling main function varMarquee=function(){ if ($("#container"). scrolltop ()>= $("#content"). Height ()) {//when the scroll bar is hidden longer than the width of Div1 $("#container"). scrolltop (0); } Else{ $("#container"). ScrollTop ($ ("#container"). scrolltop ()+1); //each scroll bar moves to the right 1px; } } //The main function does the loop varMar=setinterval (Marquee, -); $(". f12red"). MouseEnter (function() {clearinterval (MAR); }). MouseLeave (function() {Mar=setinterval (Marquee, -); })</Script></Body></HTML>
This code in fact has some flaws, including the need to carefully polished, I hope the expert guidance.
1. Scrolling to the first a tag has a noticeable delay
2. A label cannot be moved to the middle when the mouse is moved to the top
3. Scrolling is better if there is a delay, so users can watch the relevant content
。
jquery Implements seamless scroll bars
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
