The name used here may not be appropriate, but for the moment I do not think of the corresponding name, then write it first.
First of all, let me first express what I want to achieve is the effect:
Presumably everyone has played, at least seen a lot of small games, such as Super Marie, for example, Flappy Bird, in which always see Mario or birds go straight forward ah Shangmai ah, and then flew over the river, jumped over the deep pit, finally reached the end, and in this record I focus on only the background changes, Just like the following illustration:
Finally it goes to the castle, and our screen doesn't show the scroll bar, how does it move?
In fact, this function should be a relatively basic function, but not sensitive before, today from the bus to look out of the window of the scenery flash, I suddenly think of such a function, and then to achieve the next, sure enough, when the background is constantly changing, it is really strong sense of movement and a lot.
Here is a brief introduction to the key points of implementation:
1, long enough div;
2, when the div exceeds the screen length, there will be a horizontal scroll bar, and we will be the scroll bar hidden;
3, when the moving object to the right movement, the background Div marginleft also from the 0px constantly reduced, thus showing the different parts of the background div;
I don't know if this is the case in every game application, but I did it when I did it, so I came up with the code to elaborate (it's rough, just for the effect):
HTML language:
<body style= "Overflow:hidden" ><div style= "width:2000px;height:700px;background:red;" id= "Back" >// 2000px far beyond the screen width <div style= "width:300px;margin-left:600px;height:700px;background:yellow;float:left;" ></div>//different background colors in which to clearly distinguish the different positions of the Div <div style= "width:300px;margin-left:600px;height:700px;background : Blue;float:left; " ></div></div><div style= "Position:absolute;z-index:10;background: #ccc; width:100px;height : 100px;left:10px;top:300px; "id=" Move ">//find a moving object to simulate the effect <input type=" button "value=" Go "style=" width:100px; height:100px; "onclick=" Go "></div></body>
CSS section:
<style type= "Text/css" >body{margin:0px;padding:0px;} </style>
JavaScript section:
<script type= "Text/javascript" >window.onload=function Go () {var Move=document.getelementbyid ("move"); var back =document.getelementbyid ("Back");//Get two Div objects var ss=setinterval (function () {var now=parseint (back.offsetleft); move.style.left=move.offsetleft+1+ "px"; back.style.marginleft=now-1+ "px";// This is the key point that needs to be checked today Margin-left can be written here marginleft, where the left note capital l},10);} </script>
This simple implementation of the desired effect, this time is completely their own imagination to make the implementation, although the writing is very messy, but this will be in the code when the effect is still particularly happy, because this is the crystallization of their own thinking, not to analyze the results of other people's code, Kai Sen, haha, god-like men, refueling refueling ...
Today turn the key, go to see the next house, than now rent to be much better, weekend move, hey, didn't buy a car, move in the city feel good miserable, moved to move is not convenient, also really bitter daughter-in-law, accompany me took, I owe her too much. I wish I could have the room quickly, so I don't have to look for a house to rent.