Home > Developer > Web Develop
<! DOCTYPE html>
<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>
<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:
Down
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,0];
Target1 {}
Init initial 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>
Animation form 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*t + b;
}
RETURN-C/2 * ((--t) * (t-2)-1) + b;
},
Easeinstrong:function (t, b, c, d) {
return c* (t/=d) *t*t*t + b;
},
Easeoutstrong:function (t, b, c, d) {
Return-c * ((t=t/d-1) *t*t*t-1) + b;
},
Easebothstrong:function (t, b, c, d) {
If ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
RETURN-C/2 * ((t-=2) *t*t*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/a);
}
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/a);
}
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* (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/a);
}
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 distance to retract
}
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*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*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;
}
}
Gets or sets 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";
}
}
}
Performing animations
function Startmove (init) {
Clearinterval (init.el.timer);
var t = 0;
var B = {};
var C = {};
var d = init.time/20;
For (var s in Init.target) {
b[s] = CSS (init.el,s);
c[s] = init.target[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.target) {
var val = tween[init.type] (t,b[s],c[s],d);
CSS (init.el,s,val);
}
}
},20);
}
Every day a JS small demo through the keyboard keys to manipulate the picture up and down seamlessly switch. Main points of Knowledge: events
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
