Home > Developer > Web Develop
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:
CSS section:<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>
<style type= "Text/css" >body{margin:0px;padding:0px;} </style><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>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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
