Principle of motion: JavaScript to achieve the principle of motion, is to change the position of the element through the timer, until it reaches the target point after the stop motion. Usually, to make an element move, we change the relative position of the element by changing the left and top values of the element.
Methods:
(1) the object in motion uses absolute positioning (position: absolute;) ;
(2) Move the object by changing the properties (left, right, top, bottom) of the object. For example, moving to the right or left can be controlled by using offsetLeft (offsetRight).
Steps:
(1) Before the start of the movement, first clear the existing timer (because: is continuous click the button, the object will move faster and faster, resulting in motion chaos);
(2) Start the timer to calculate the speed;
(3) Separate the motion from the stop (if/else), judge the stop condition, and execute the motion.
1. Uniform motion
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:100px;
height:100px;
background-color: aquamarine;
position: absolute;
top:100px;
}
</style>
</head>
<body>
<button>Click on the</button>
<div id="box">
</div>
</body>
</html>
<script>
let btn = document.querySelector("button");
let box = document.getElementById("box");
let time;
function startMove() {
// Clear the timer once each time you click, and it will get faster and faster
clearInterval(time);
time = setInterval(() = > {
box.style.left = box.offsetLeft + 5 + "px";
// Read the moved value
if(box.offsetLeft >= 300) {// Give a lambda equal to
box.style.left = 300 + "px";
clearInterval(time); }},50);
}
btn.onclick = function () {
startMove();
}
</script>
Copy the code2, uniform round trip movement
<! DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:100px;
height:100px;
background-color: aquamarine;
position: absolute;
top:100px;
}
</style>
</head>
<body>
<button class="start">start</button>
<button class="end">return</button>
<div id="box">
</div>
</body>
</html>
<script>
let start = document.querySelector(".start");
let end = document.querySelector(".end");
let box = document.getElementById("box");
let time;
function startMove(targat) {
console.log(targat);
// Clear the timer once each time you click, and it will get faster and faster
clearInterval(time);
time = setInterval(() = > {
let speed = targat - box.offsetLeft > 0 ? 5 : -5 ;
box.style.left = box.offsetLeft + speed + "px";
if(box.offsetLeft >= 300 || box.offsetLeft <= 0) {clearInterval(time); }},50);
}
start.onclick = function () {
startMove(300);
}
end.onclick = function (){
startMove(0);
}
</script>
Copy the code3, mouse move in, fade in and out
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box {
width: 100px;
height: 100px;
background-color:aquamarine;
opacity: 0.1;
position: absolute;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div id="box" onmouseover="startMove(1)" onmouseout="StartMove (0.1)">
</div>
</body>
</html>
<script>
let oBox = document.querySelector("#box");
let time = null;
function startMove(targat) {
clearInterval(time);
time = setInterval(function () {
//getComputedStyle Gets a non-inline style
let speed = targat - getComputedStyle(oBox, false) ["opacity"] > 0 ? 0.01 : -0.01;
oBox.style.opacity = +getComputedStyle(oBox, false) ["opacity"] + speed;
if (getComputedStyle(oBox, false) ["opacity"] > =1 || getComputedStyle(oBox, false) ["opacity"] < =0.1) {
clearInterval(time); }},50);
}
</script>
Copy the code4, uniform buffer movement
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 200px;
}
</style>
</head>
<body>
<button>Start the</button>
<div id="box">
</div>
</body>
</html>
<script>
let oBox = document.querySelector("#box");
let oBtn = document.querySelector("button");
let time;
oBtn.onclick = function(){
startMove(oBox,500);
}
/** * the target buffer has been moved */
function startMove(obj,target) {
clearInterval(time);
time = setInterval(function () {
let speed = (target - obj.offsetLeft) / 10;
// Use the algorithm derived by the elder brother directly
// Can divide decimal place, accurate to integer
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);// The core algorithm
obj.style.left = obj.offsetLeft + speed + "px";
if (obj.offsetLeft == target) {
clearInterval(time); }},50);
}
</script>
Copy the code5, rebound
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box{
height: 25px;
width: 25px;
background-color: green;
border-radius: 50%;
position: absolute;
top:200px;
}
</style>
</head>
<body>
<button>Start the</button>
<div id="box">
</div>
</body>
</html>
<script>
let oBox = document.querySelector("#box");
let oBtn = document.querySelector("button");
let time = null;
function startMove(){
let speedX = 5;
let speedY = 5;
time = setInterval(function(){
oBox.style.left = oBox.offsetLeft + speedX + "px";
oBox.style.top = oBox.offsetTop + speedY + "px";
if(oBox.offsetLeft < 0) {// Rang the box to the viewport border
speedX *= -1;// equivalent to spddeX=speedX*-1; (Keep moving in the other direction)
}
let maxX = window.innerWidth - oBox.offsetWidth;
if(oBox.offsetLeft > maxX){
speedX *= -1;
}
if(oBox.offsetTop < 0){
speedY *= -1;
}
let maxY = window.innerHeight - oBox.offsetHeight;
if(oBox.offsetTop > maxY){
speedY *= -1; }},10);
}
oBtn.onclick = function(){
startMove();
}
</script>
Copy the code
6. Parabola
<! DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function () {
//y = ax*x + bx + c ;
// The value of a can be obtained from the value of x;
var box = document.getElementById("box");
var target = document.getElementById("target");
// curvature >> You can see what happens when you change the value of a;
// The relative coordinates of the target point;
var a = 0.008;
var coord = {
x: target.offsetLeft - box.offsetLeft,
y: target.offsetTop - box.offsetTop
}
// Find the coefficient b
//y = ax*x + bx + 0
//bx = y - a*x*x
// The formula is; b = (y - a*x*x) / x ;
var b = (coord.y - a * coord.x * coord.x) / coord.x;
// The origin coordinates;
var center = {
x: box.offsetLeft,
y: box.offsetTop
}
var speed = 1;
var offsetX = 0;// The value moved on the coordinate axis
var timer = setInterval(function () {
//console.log(box.offsetLeft)
box.style.left = center.x + (offsetX += speed) + "px";
box.style.top = center.y + (a * offsetX * offsetX + b * offsetX) + "px";
if (offsetX >= coord.x) {
box.style.left = target.offsetLeft + 'px';
box.style.top = target.offsetTop + 'px';
clearInterval(timer);
}
/ / trajectory.
var div = document.createElement('div')
div.className = "box";
div.style.left = center.x + (offsetX += speed) + "px";
div.style.top = center.y + (a * offsetX * offsetX + b * offsetX) + "px";
document.getElementsByTagName("body") [0].appendChild(div);
}, 30)}</script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 2px;
height: 2px;
background: # 000;
position: absolute;
}
#box {
width: 30px;
height: 30px;
background: red;
position: absolute;
left: 100px;
top: 500px;
}
#target {
width: 30px;
height: 30px;
background: # 000;
position: absolute;
left: 700px;
top: 300px;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="target"></div>
</body>
</html>
Copy the code
7. Gravity rebound (similar to playing a ball)
<! DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>* {margin: 0;
padding: 0;
}
#container{
width: 800px;
height: 400px;
margin: 30px auto;
border: 1px solid #b6b6b6;
position: relative;
}
#box{
width: 50px;
height: 50px;
background:aquamarine;
border-radius: 50%;
position: absolute;
left: 100px;
top: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="box">
</div>
</div>
</body>
</html>
<script>
window.onload = function(){
var g = 1; // The acceleration of gravity;
var vx = 2; // X axis velocity;
var vy = 0; // Y axis velocity;
var ball = document.getElementById("box");
var container = document.getElementById("container");
var cH = document.documentElement.clientHeight || document.body.clientHeight;
var containerHeight = container.offsetHeight;
var conTop = container.offsetTop;
var left, top;
setInterval(function () {
if (ball.offsetTop >= containerHeight - ball.offsetHeight) {
ball.style.top = containerHeight - ball.offsetHeight + "px";
// Control the height of the bullet
vy = -vy * 8.;
}
vy = vy + g;
left = ball.offsetLeft + vx;
top = ball.offsetTop + vy;
ball.style.left = left + "px";
ball.style.top = top + "px";
}, 30)}</script>
Copy the code8. Case (advertisements followed on both sides)
<! DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
img{
position: absolute;
left:0;
top:50px;
}
#demo{
width:1000px;
margin:0 auto;
}
</style>
</head>
<body>
<img src="https://gitee.com/Green_chicken/picture/raw/master/%E7%AC%94%E8%AE%B0%E5%9B%BE%E7%89%87/20210216224103.jpg" alt="" id="pic"/>
<div id="demo">
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
<p>King covered tiger, chicken braised mushroom</p>
</div>
</body>
</html>
<script type="text/javascript">
var oPic = document.querySelector("#pic");
window.onscroll = function(){
// Get the page roll distance
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
startMove( oPic , 50 + sTop );
}
var timer = null;
function startMove(obj,target){
clearInterval(timer);
timer = setInterval(function(){
// Buffering motion principle
var speed = (target-obj.offsetTop)/10;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if( obj.offsetTop == Math.floor(target) ){
clearInterval( timer );
}else{
obj.style.top = obj.offsetTop + speed + "px"; }},30)}</script>
Copy the code