search

Home >Web Front-end >JS Tutorial >Javascript realizes the 'floating cloud' imitating WebQQ interface and is compatible with IE7 and above versions and FF_javascript skills

Javascript realizes the 'floating cloud' imitating WebQQ interface and is compatible with IE7 and above versions and FF_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:07:25955browse

Upload the picture material first:

Background picture:

Floating cloud picture: ←——————————Here is picture D~ You can see it by selecting all (because the background is white and so are the clouds White~)...
CSS code:

Copy code The code is as follows:



Understanding: .hScroll is to hide the scroll bar of the browser; otherwise, you will understand what is going on at a glance, so I won’t talk nonsense;
Code in body:
Copy code The code is as follows:


< div class="cloud" id="moveCloud">



Understanding: The StarMove() function is called when the page is loaded;
Javascript code:
Copy code The code is as follows:



Understanding: document.documentElement.className = "hScroll"; is to call the code in the css style, the purpose is to hide the browser's scroll bar (nonsense...didn't I say it above^_^||)
First of all, we need to get the id of the "Floating Cloud" layer, so we use cloud = document.getElementById("moveCloud"); cloud is a global variable, which has been defined above, so it can be used directly here (no worries for veterans) Spray, for new birds to see).
Then give him a "timer" setInterval(Move, 100); call the Move function once every 100 milliseconds;
left = 1; equivalent to left=left 1 ; Use it in conjunction with the above function (called every 100 milliseconds~), and then assign it to the original coordinates of the "floating cloud" layer; so it is written as cloud.style.left = left "px" ;
What a horse? You ask me what is left? It is the position attribute in the css style! If you don’t believe me, write a position colon in DW and see if it comes out?
if (left >= (screen.width)) ; left = -580; It is judged that if the position of the "floating cloud" moving (from the left) is greater than or equal to the width of the screen, we will let him start from the beginning and The value of left is set to -580;
Why set it to -580?? Look in the CSS, the size of the floating cloud picture is 580*250, that is, its length is 580px; so the reason for setting it to -580 is Let it display little by little from the right, otherwise the whole picture will be displayed as soon as it comes up. How scary~
I have been wasting my words for a long time, I don’t know if everyone (like me) understands it, but the following is complete Please save the code as a .html file and give it a try; download the image yourself, don’t forget to change the path!
Full code:
Copy code The code is as follows:




背景图片移动








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：Share 14 cool jQuery navigation menu plugins_jqueryNext article：Share 14 cool jQuery navigation menu plugins_jquery

Related articles

See more