The Helper home (www.bkjia.com) Tutorial recently designed a non-gap scrolling effect on the homepage image. It was originally prepared to use marquee, but <marquee> there was a gap during loop scrolling. I found it online.
This is relatively simple. Implementation idea: a container demo that sets the width and hides content beyond its width. demo1 and demo2 are included in the demo, demo1 is the scrolling content, and demo2 is the direct clone of demo1, by constantly changing the scrollTop or scrollLeft of demo1, you can directly jump back to the initial position when you scroll to the junction of demo1 and demo2. Because demo1 is the same as demo2, you cannot tell the beat moment, this achieves seamless rolling.
First, let's take a look at several attributes of the object:
| Reference content is as follows: InnerHTML: sets or retrieves HTML in the object's start and end tags. ScrollHeight: gets the scroll height of an object. ScrollLeft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window. ScrollTop: sets or obtains the distance between the top of the object and the top of the visible content in the window. ScrollWidth: gets the scroll width of an object. OffsetHeight: gets the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute. OffsetLeft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute. OffsetTop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute. OffsetWidth: gets the width of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute. |
<Html>
Tip: the code can be modified before running!
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
