<!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);
}The above is the detailed content of JS Daily Question - A small demo using JS to achieve seamless switching of images up, down, left, and right through keyboard arrow keys. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
