No time to update the daily, this time we use JavaScript to achieve a simple animation moving effect, the idea is very simple, is to use the "CSS DOM", the position of the element to change. Then use the settimeout () function to change the position of the function to call repeatedly, so that the text or pictures to move, line into animation effect.
Nonsense not to say, directly on code:
This is HTML:
<body>
<p id= "Message" >
Lost time, relentlessly.
</p>
<script src= "Js/initposition.js" ></script>
<script src= "Js/onload.js" ></script>
<script src= "js/animation/donghua.js" ></script>
<script src= "Js/final.js" ></script>
<script src= "js/animation/jishu.js" ></script>
</body>
This is initposition: The function is to get the initialization position of the element.
function Initpos () {
var Elem=document.getelementbyid ("message"); //Get ID message
Elem.style.color= "#" +randomcolor (); //This is a random color function defined by itself, followed by code.
elem.style.position= "Absolute"; //dom define style, position, etc.
Elem.style.left= "30px";
elem.style.top= "50px";
Moveelement ("message", 500,500,10); //For more information please look down
}
This is onload.js: Call the Inipos () function after the page load is complete
Window.onload=function () {
Initpos ();
}
This is donghua.js is the key to achieve the text or picture movement
function Moveelement (elementid,final_x,final_y,interval) { //parameters are the value of the ID selector, the destination position on the x-axis, the destination on the y-axis, and the time interval at which functions are executed
var Elem=document.getelementbyid (ElementID);//Get ID, here is also a message
var xpos=parseint (elem.style.left); //Get initial, use the Parsint function to turn the string into a number. Why do you want to change numbers? The reason is that we're going to compare this position with the target seat .
var ypos=parseint (elem.style.top);
if (xpos<final_x) {//Position comparison, if the position of this element is less than the destination, then the initial position of this element is increased,
xpos++;
}
if (xpos>final_x) {//If this position is greater than the destination, then the initial position-""
xpos--;
}
if (ypos>final_y) {
ypos--;
}
if (ypos<final_y) {
ypos++;
}
if (xpos==final_x&&ypos==final_y) {//Cough, this one will say, you can look down
Final ();
}
elem.style.left=xpos+ "px";We will change the initial position to a number in order to compare it with the destination, so that we cannot alter the element style, so we add "px" here;
elem.style.top=ypos+ "px";
var repeat= "moveelement ('" +elementid+ ", +" +final_x+ "," +final_y+ "," +interval+ ")";//Assign the function to the variable, easy to use the following writing, or settimeout inside put a long string of code, it seems very painful.
Movment=settimeout (Repeat,interval);///SetTImeout () function, which means interval interval (parameter) time is called once repeat (function, where function is Moveelement () function);
}
This is final.js:
Function final () {
Location.reload (); //o (╥﹏╥) O, in order to see the animation movement repeatedly, I here very rude directly implemented the page refresh ...
}
function Randomcolor () {
var Color=math.ceil (Math.random () *1700). toString (16); //Random color function, change the text color, make the text animation appear more obvious.
return color;
}
Effects can be viewed:https://runjs.cn/detail/gzxxneoo
Temporarily put the code in the Run.js display. But every time you refresh the page, you'll get stuck. It seems that each time the effect of loading is not good, can not see the manual refresh the page.
JS to achieve a simple animation effect of the movement
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
