Home > Developer > JavaScript

JavaScript implementation text Picture seamless scrolling effect code

Source: Internet
Author: User
Tags setinterval
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Today to do the project encountered a scrolling effect, originally intended to do with marquee, because it is the HTML tag, write simple, but there is a problem is marquee can not achieve seamless scrolling, the Internet to find some methods, found that marquee can achieve seamless, But in the brain residue of IE environment.

No way, in order to achieve the requirements, oneself and from the Internet to find some relevant code to modify, and finally achieve the effect, now the code to share with you, there are questions to please more correct.

The code is as follows:

The code is as follows Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> text list seamlessly scroll up JavaScript code </title>
<style type= "Text/css" >
#xunhuan {
Overflow:hidden; /* The overflow part does not show * *
height:100px;
}
#xunhuan1, #xunhuan2 {height:auto;}
</style>
<body>
<div id= "Xunhuan" >
<div id= "Xunhuan1" >
<ul>
<li> This is the 1th article </li>
<li> This is the 2nd article </li>
<li> This is the 3rd article </li>
<li> This is the 4th article </li>
<li> This is the 5th article </li>
<li> This is the 6th article </li>
</ul>
</div>
<div id= "Xunhuan2" ></div>
</div>
<script>
var speed=10; The larger the number, the slower the speed.
var Tab=document.getelementbyid ("Xunhuan");
var Tab1=document.getelementbyid ("Xunhuan1");
var Tab2=document.getelementbyid ("Xunhuan2");
tab2.innerhtml=tab1.innerhtml; Clone Demo1 for Demo2
function Marquee () {
if (tab2.offsettop-tab.scrolltop<=0)//when scrolling to the junction of Demo1 and Demo2
Tab.scrolltop-=tab1.offsetheight//demo jump to the top
else{
tab.scrolltop++
}
}
var mymar=setinterval (marquee,speed);
Tab.onmouseover=function () {clearinterval (MyMar)};//to clear the timer when the mouse moves up to stop the scroll
Tab.onmouseout=function () {mymar=setinterval (marquee,speed)};//Reset timer when mouse is moved
</script>
</body>

It should be noted that in addition to the style I wrote in the styles, the other two points of attention is: the inside of Li can not float, the most peripheral xunhuan height is less than the height of the elements inside, to be enough for it to cycle rolling.

Example is the effect of scrolling up, if you want to scroll to the left, make the appropriate changes.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html scrolling banner code scrolling text after effects template smoke text effect download strtok implementation code c picture text fonts upload picture html code how to get picture code
Related Article
The difference between single and double quotes in JavaScript...
Http status code: 301, 302 redirection, 302 redirection
Ajax and 302 response code test_javascript-js tutorial

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More