Every day, a JS demo uses the keyboard arrow keys to seamlessly switch between top, bottom, and left. Key knowledge points: events, jsdemo
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> Document </title>
<Style type = "text/css">
. Wrap {
Margin: 150px auto;
Position: relative;
Width: 400px;
Height: 300px;
Overflow: hidden;
Border: 2px solid #000;
}
. Wrap img {
Position: absolute;
}
</Style>
</Head>
<Body>
<Div class = "wrap">
</Div>
<Script type = "text/javascript" src = "js/startmove. js"> </script>
<Script type = "text/javascript">
(Function (){
Var data = ["pic/1.jpg"," pic/2.jpg", "pic/3.jpg"," pic/4.jpg"];
Var img = document. querySelectorAll ('img ');
Var now = 0;
Var next = 0;
Var imgW = css (img [0], "width ");
Var imgH = css (img [0], "height ");
Var isMove = false;
Document. addEventListener ('keyup', function (e ){
If (isMove ){
Return;
}
Switch (e. keyCode ){
Case 37:
// Left
ToLeft ();
Break;
Case 38:
// Up
ToUp ();
Break;
Case 39:
// Right
ToRight ();
Break;
Case 40:
// Downward
ToDown ();
Break;
}
});
Function toLeft (){
Next = (now + 1) % data. length;
Init ([0, 0, 0, imgW], {left:-imgW}, {left: 0 });
}
Function toUp (){
Next = (now + 1) % data. length;
Init ([0, 0, imgH, 0], {top:-imgH}, {top: 0 });
}
Function toRight (){
Next = (now-1 + data. length) % data. length;
Init ([0, 0, 0,-imgW], {left: imgW}, {left: 0 });
}
Function toDown (){
Next = (now-1 + data. length) % data. length;
Init ([0, 0,-imgH, 0], {top: imgH}, {top: 0 });
}
// Styles = [0, 0, 0];
// Target1 {}
// Initial init position
Function init (styles, target1, target2 ){
IsMove = true;
Img [0]. src = data [now];
Img [1]. src = data [next];
Css (img [0], "top", styles [0]);
Css (img [0], "left", styles [1]);
Css (img [1], "top", styles [2]);
Css (img [1], "left", styles [3]);
Now = next;
Move (img [0], target1 );
Move (img [1], target2, function (){
IsMove = false;
});
}
// Move
Function move (el, target, callBack ){
StartMove ({
El: el,
Target: target,
Type: "easeOut ",
Time: 1000
});
}
})();
</Script>
</Body>
</Html>
// Animation format Formula
Var Tween = {
Linear: function (t, B, c, d ){
Return c * t/d + B;
},
EaseIn: function (t, B, c, d ){
Return c * (t/= d) * t + B;
},
EaseOut: function (t, B, c, d ){
Return-c * (t/= d) * (t-2) + B;
},
EaseBoth: function (t, B, c, d ){
If (t/= d/2) <1 ){
Return c/2 * t + B;
}
Return-c/2 * (-- t) * (t-2)-1) + B;
},
EaseInStrong: function (t, B, c, d ){
Return c * (t/= d) * t + B;
},
EaseOutStrong: function (t, B, c, d ){
Return-c * (t = t/D-1) * t-1) + B;
},
EaseBothStrong: function (t, B, c, d ){
If (t/= d/2) <1 ){
Return c/2 * t + B;
}
Return-c/2 * (t-= 2) * t-2) + B;
},
ElasticIn: function (t, B, c, d, a, p ){
If (t = 0 ){
Return B;
}
If (t/= d) = 1 ){
Return B + c;
}
If (! P ){
P = d * 0.3;
}
If (! A | a <Math. abs (c )){
A = c;
Var s = p/4;
} Else {
Var s = p/(2 * Math. PI) * Math. asin (c/);
}
Return-(a * Math. pow (2,10 * (t-= 1) * Math. sin (t * d-s) * (2 * Math. PI)/p) + B;
},
ElasticOut: function (t, B, c, d, a, p ){
If (t = 0 ){
Return B;
}
If (t/= d) = 1 ){
Return B + c;
}
If (! P ){
P = d * 0.3;
}
If (! A | a <Math. abs (c )){
A = c;
Var s = p/4;
} Else {
Var s = p/(2 * Math. PI) * Math. asin (c/);
}
Return a * Math. pow (2,-10 * t) * Math. sin (t * d-s) * (2 * Math. PI)/p) + c + B;
},
ElasticBoth: function (t, B, c, d, a, p ){
If (t = 0 ){
Return B;
}
If (t/= d/2) = 2 ){
Return B + c;
}
If (! P ){
P = d x (0.3*1.5 );
}
If (! A | a <Math. abs (c )){
A = c;
Var s = p/4;
}
Else {
Var s = p/(2 * Math. PI) * Math. asin (c/);
}
If (t <1 ){
Return-0.5 * (a * Math. pow (2, 10 * (t-= 1 ))*
Math. sin (t * d-s) * (2 * Math. PI)/p) + B;
}
Return a * Math. pow (2,-10 * (t-= 1 ))*
Math. sin (t * d-s) * (2 * Math. PI)/p) * 0.5 + c + B;
},
BackIn: function (t, B, c, d, s ){
If (typeof s = 'undefined '){
S = 1.70158;
}
Return c * (t/= d) * t * (s + 1) * t-s) + B;
},
BackOut: function (t, B, c, d, s ){
If (typeof s = 'undefined '){
S = 2.70158; // The contraction distance.
}
Return c * (t = t/D-1) * t * (s + 1) * t + s) + 1) + B;
},
BackBoth: function (t, B, c, d, s ){
If (typeof s = 'undefined '){
S = 1.70158;
}
If (t/= d/2) <1 ){
Return c/2 * (t * (s * = (1.525) + 1) * t-s) + B;
}
Return c/2 * (t-= 2) * t * (s * = (1.525) + 1) * t + s) + 2) + B;
},
BounceIn: function (t, B, c, d ){
Return c-Tween ['bounceout'] (d-t, 0, c, d) + B;
},
BounceOut: function (t, B, c, d ){
If (t/= d) <(1/2. 75 )){
Return c * (7.5625 * t) + B;
} Else if (t <(2/2. 75 )){
Return c * (7.5625 * (t-= (1.5/2.75) * t + 0.75) + B;
} Else if (t <(2.5/2.75 )){
Return c * (7.5625 * (t-= (2.25/2.75) * t + 0.9375) + B;
}
Return c * (7.5625 * (t-= (2.625/2.75) * t + 0.984375) + B;
},
BounceBoth: function (t, B, c, d ){
If (t <d/2 ){
Return Tween ['bouncein'] (t * 2, 0, c, d) * 0.5 + B;
}
Return Tween ['bounceout'] (t * 2-d, 0, c, d) * 0.5 + c * 0.5 + B;
}
}
// Obtain or set the style
Function css (el, attr, val ){
If (arguments. length = 2 ){
If (el. currentStyle ){
Val = el. currentStyle [attr];
} Else {
Val = getComputedStyle (el) [attr];
}
Return parseFloat (val );
} Else {
If (attr = "opacity "){
El. style. opacity = val;
El. style. filter = "alpha (opacity =" + val * 100 + ")";
} Else if (attr = "zIndex "){
El. style [attr] = Math. round (val );
} Else {
El. style [attr] = val + "px ";
}
}
}
// Execute the animation
Function startMove (init ){
ClearInterval (init. el. timer );
Var t = 0;
Var B = {};
Var c = {};
Var d = init. time/20;
For (var s in init.tar get ){
B [s] = css (init. el, s );
C [s] = init.tar get [s]-B [s];
}
Init. el. timer = setInterval (function (){
T ++;
If (t> d ){
ClearInterval (init. el. timer );
Init. callBack & init. callBack ();
} Else {
For (var s in init.tar get ){
Var val = Tween [init. type] (t, B [s], c [s], d );
Css (init. el, s, val );
}
}
}, 20 );
}
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
