Home > Developer > Web Develop
Javascript creates the illusion of motion ------- Day63, and js illusion ------- day63
This name may not be suitable here, but I didn't think of a corresponding name for the moment, so write it first.
First, let me first express what I want to achieve:
I think everyone has played. At least I have seen many games, such as super Mary and flappy bird. I always see Mario or the bird moving forward and then fly over the river, I skipped the deep hole and finally reached the end point. In this record, all I care about is the background change, as shown in the following figure:
In the end, it enters the castle, and the scroll bar is not displayed on our screen. How does it move?
In fact, this function should be a relatively basic function, but it was not sensitive enough before. Today, I suddenly think of such a function when I watched the scenery out of the window from the bus, then we realized it, and it was really effective. When the background was constantly changing, we felt a lot more sporty.
Here we will briefly introduce the key points of implementation:
1. Long enough div;
2. When the div exceeds the screen length, a horizontal scroll bar will appear, and we will hide the scroll bar;
3. When the moving object moves to the right, the marginLeft value of the background div is also reduced from 0px to display different parts of the background div;
I don't know if this is the solution for various game applications, but I did achieve this in this way, so I can come up with the code, (The figure is rough, just to achieve the effect ):
Html language:
<Body style = "overflow: hidden"> <div style = "width: 2000px; height: 700px; background: red; "id =" back "> // The Screen width is greater than <div style =" width: 300px; margin-left: 600px; height: 700px; background: yellow; float: left; "> </div> // different background colors are displayed in the display, clearly differentiate the different positions of the div <div style =" width: 300px; margin-left: 600px; height: 700px; background: blue; float: left; "> </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 first today. margin-left can be written as marginLeft here. Note that the Left here should be capitalized L}, 10 );} </script>This is a simple implementation of the desired results. This is an implementation made entirely based on your own imagination. Although the writing is messy, it will be very happy to see the code effect, because this is the crystallization of your own thinking, not the result of analyzing other people's code. kensen, haha, a god-like man, come on...
Today, I handed in the key and went to see the house, which is much better than what I rented now. I migrated my house on weekends. Well, I didn't buy a car. It was so miserable to move it in the city that it was inconvenient to move it, my daughter-in-law is also really bitter, and I am traveling with me, I owe her too much. I really hope I can deliver the house quickly, so I don't need to rent a house everywhere ....
/**
* @ Author miaov
*/
Function getStyle (obj, attr)
{
If (obj. currentStyle)
{
Return obj. currentStyle [attr];
}
Else
{
Return getComputedStyle (obj, false) [attr];
}
}
Function startMove (obj, attr, iTarget, fn)
{
ClearInterval (obj. timer );
Obj. timer = setInterval (function (){
// 1. Obtain the current value
Var iCur = 0;
If (attr = 'opacity ')
{
ICur = parseInt (parseFloat (getStyle (obj, attr) * 100 );
}
Else
{
ICur = parseInt (getStyle (obj, attr ));
}
// 2. computing speed
Var iSpeed = (iTarget-iCur)/8;
ISpeed = iSpeed> 0? Math. ceil (iSpeed): Math. floor (iSpeed );
// 3. Check to stop
If (iCur = iTarget)
{
ClearInterval (obj. timer );
If (fn)
{
Fn ();
}
}
Else
{
If (attr = 'opacity ')
{
Obj. style. filter = 'Alpha (opacity: '+ (iCur + iSpeed) + ')';
Obj. style. opacity = (iCur + iSpeed)/100;
}
Else
{
Obj. style [attr] = iCur + iSpeed + 'px ';
}
}
}, 30)
}
In js sports, you can not talk about the principle of a group of pictures as a ring sports team. It is best to have a formula to explain it, for example, the following figure.
Var a = math. sin ()
Var B = math. cos ()
This is based on the angle (1-degrees) in the calculation of a, B coordinates, you see the X axis Y axis
X = sin (angle)
Y = sin (angle). The angle value range is [0,360)
If you want the div to be moved, you need to increase the angle, calculate and assign the top and left values,
This is the principle, and then calculate the left top of the div. Of course, there must be an absolute (or relative) attribute.
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
