On the picture material first:
Background picture:
Cloud Picture: ← —————————— Here is a picture d~ all choose to be able to see (because the background is white, cloud is also white ~) ...
CSS code:
Copy Code code as follows:
<style type= "Text/css" >
*
{
margin:0;
padding:0;
}
Body
{
Background:url ("images/body_bg.jpg") repeat Center 0 fixed;
}
. Cloud
{
Background:url ("Images/cloud1.png");
height:250px;
width:580px;
Position:absolute;
}
. hscroll
{
Overflow:hidden;
}
</style>
Understanding:. HScroll is to keep the scroll bar of the browser hidden; the other one to see what happened, I also do not nonsense;
Code in the body:
Copy Code code as follows:
<body onload= "Startmove ()" >
<div class= "Cloud" id= "Movecloud" >
</div>
</body>
Understanding: Call the Starmove () function when the page loads;
JavaScript code:
Copy Code code as follows:
<script language= "javascript" type= "Text/javascript" >
var cloud = null;
var left = 0;
Document.documentElement.className = "HScroll";
function Startmove () {
Cloud = document.getElementById ("Movecloud");
SetInterval (move, 100);
}
function Move () {
left = 1;
Cloud.style.left = left + "px";
if (left >= (screen.width)) {
left =-580;
}
}
</script>
Understanding: Document.documentElement.className = "HScroll"; is to invoke the code in the CSS style to hide the browser's scroll bar (nonsense ...). That's not what it said. ^_^ | | )
First, we have to get the ID of the "cloud" layer, so we use the cloud = document.getElementById ("Movecloud"); Cloud is a global variable, which has been defined above, so it can be used directly here (the old bird does not spray, for new birds to see).
And then give him a "timer" setinterval (move, 100); Call a move function in 100 milliseconds;
Left + = 1; equivalent to left=left+1; With the above function (every 100 milliseconds call once ~) use, and then assign value to the "cloud" layer of the original coordinates; so wrote cloud.style.left = left + "px";
God horse? You asked me what left is? He is the position attribute of CSS style! Don't believe you write a position colon in DW, see him come out?
if (left >= (screen.width)), left =-580; is to break the sentence if the position of the "cloud" is greater than or equal to the width of the screen, let's start from scratch and set the left value to 580;
Why set-580?? Look at the inside of the CSS, cloud picture size is 580*250, that is, his length is 580px, so he set to 580 is to let it start from the right to a little bit, otherwise it will show the whole picture, how scary ah ~
Waste a half-day, do not know everyone (and I have the same dish) see understand no, the following is the complete code, save as. html file Try it, don't forget to change the path!
Complete code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> background picture Mobile </title>
<style type= "Text/css" >
*
{
margin:0;
padding:0;
}
Body
{
Background:url ("images/body_bg.jpg") repeat Center 0 fixed;
}
. Cloud
{
Background:url ("Images/cloud1.png");
height:250px;
width:580px;
Position:absolute;
}
. hscroll
{
Overflow:hidden;
}
</style>
<script language= "javascript" type= "Text/javascript" >
var cloud = null;
var left = 0;
Document.documentElement.className = "HScroll";
function Startmove () {
Cloud = document.getElementById ("Movecloud");
SetInterval (move, 100);
}
function Move () {
left = 1;
Cloud.style.left = left + "px";
if (left >= (screen.width)) {
left =-580;
}
}
</script>
<body onload= "Startmove ()" >
<div class= "Cloud" id= "Movecloud" >
</div>
</body>
