<!DOCTYPE html>
<html>
<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>
<p>
<img src="pic/1.jpg" style="left:0;top:0" />
<img src="pic/2.jpg" style="left:0;top:100%" />
</p>
<script type="text/javascript" src="js/startmove.js?1.1.10"></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:
//向左
toLeft();
break;
case 38:
//向上
toUp();
break;
case 39:
//向右
toRight();
break;
case 40:
//向下
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 初始位置
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;
});
}
// 移动
function move(el,target,callBack){
startMove({
el:el,
target:target,
type: "easeOut",
time: 1000
});
}
})();
</script>
</body>
</html>
//动画形式公式
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; //回缩的距离
}
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;
}
}
// 获取或者设置样式
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";
}
}
}
//执行动画
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);
}Das obige ist der detaillierte Inhalt vonJS Daily Question – Eine kleine Demo mit JS, um ein nahtloses Umschalten von Bildern nach oben, unten, links und rechts über die Pfeiltasten der Tastatur zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
