Image seamless scrolling code (left/down/up)_javascript skills

I believe everyone has noticed that does not scroll in a loop, so many alternative scripts have appeared, or iframe or JS output . No matter how you do it, it is a bit troublesome. Let’s talk about this relatively simple implementation idea: a container demo that sets the width and hides the content beyond its width, and puts demo1 and demo2 inside. demo1 is the scrolling content, and demo2 is a direct clone of demo1. By constantly changing the scrollTop of demo1 or scrollLeft achieves the purpose of scrolling. When scrolling to the junction of demo1 and demo2, it jumps directly back to the initial position. Because demo1 is the same as demo2, the jumping moment cannot be distinguished, thereby achieving the purpose of "seamless" scrolling.

Made certain modifications based on the original author's work, mainly in the style, replacing tables with labels. And standardize JavaScript so that it can run in all browsers.

Let’s first learn about several properties of the object: innerHTML: Set or get the HTML located in the starting and ending tags of the object scrollHeight: Get the scroll height of the object.

scrollLeft: Sets or gets the distance between the left edge of the object and the leftmost end of the currently visible content in the window scrollTop: Sets or gets the distance between the topmost edge of the object and the topmost visible content in the window scrollWidth : Get the scroll width of the object offsetHeight: Get the height of the object relative to the layout or the parent coordinate specified by the offsetParent property offsetLeft: Get the calculated left position of the object relative to the layout or the parent coordinate specified by the offsetParent property offsetTop: Get the relative position of the object The calculated top position offsetWidth relative to the layout or the parent coordinate specified by the offsetTop property: Gets the width of the object relative to the layout or the parent coordinate specified by the offsetParent property

Copy code The code is as follows:

图片上无缝滚动

向上滚动

<script> <br><!-- <BR>var speed=10; //数字越大速度越慢 <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 <BR>function Marquee(){ <BR>if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 <BR>tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端 <BR>else{ <BR>tab.scrollTop++ <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 <BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 <BR>--> <br></script>
图片下无缝滚动

向下滚动

<script> <br><!-- <BR>var speed=10; //The larger the number, the slower the speed <BR>var tab=document.getElementById("demo"); <BR> var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; //Clone demo1 as demo2 <BR>tab.scrollTop =tab.scrollHeight <BR>function Marquee(){ <BR>if(tab1.offsetTop-tab.scrollTop>=0)//When scrolling to the intersection of demo1 and demo2<br>tab.scrollTop =tab2.offsetHeight // demo jumps to the top <br>else{ <br>tab.scrollTop-- <br>} <br>} <br>var MyMar=setInterval(Marquee,speed); <br>tab.onmouseover=function() { clearInterval(MyMar)};//Clear the timer when the mouse moves up to stop the scrolling<br>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//Reset when the mouse moves away Timer<br>--> <br></script>
Picture left seamless scroll

Scroll left

<script> <br><!-- <BR>var speed=10; //The larger the number The slower the speed <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; <BR>function Marquee(){ <BR>if(tab2.offsetWidth-tab.scrollLeft<=0) <BR>tab.scrollLeft-=tab1.offsetWidth <BR>else{ <BR>tab.scrollLeft ; <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar)}; <BR>tab.onmouseout =function() {MyMar=setInterval(Marquee,speed)}; <BR>--> <br></script>
Image right seamless scroll

Scroll right

<script> <br><!-- <BR>var speed=10; //The larger the number, the slower the speed. <BR>var tab=document.getElementById("demo"); <BR>var tab1=document.getElementById("demo1"); <BR>var tab2=document.getElementById("demo2"); <BR>tab2.innerHTML=tab1.innerHTML; <BR>function Marquee(){ <BR>if(tab.scrollLeft<=0) <BR>tab.scrollLeft =tab2 .offsetWidth <BR>else{ <BR>tab.scrollLeft-- <BR>} <BR>} <BR>var MyMar=setInterval(Marquee,speed); <BR>tab.onmouseover=function() {clearInterval(MyMar )}; <BR>tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; <BR>--> <br></script>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Based on jquery, the background left menu clicks to slide up and down to display_jqueryNext article：Based on jquery, the background left menu clicks to slide up and down to display_jquery

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved