Question quotidienne JS - Une petite démo utilisant JS pour obtenir une commutation transparente des images vers le haut, le bas, la gauche et la droite via les touches fléchées du clavier-Tutoriel H5-php.cn

Question quotidienne JS - Une petite démo utilisant JS pour obtenir une commutation transparente des images vers le haut, le bas, la gauche et la droite via les touches fléchées du clavier

巴扎黑

Libérer： 2018-05-17 13:46:08

original

3701 Les gens l'ont consulté

<!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(&#39;img&#39;);
var now = 0;
var next = 0;
var imgW = css(img[0],"width");
var imgH = css(img[0],"height");
var isMove = false;
document.addEventListener(&#39;keyup&#39;, 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 == &#39;undefined&#39;) {
  s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == &#39;undefined&#39;) {
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 == &#39;undefined&#39;) {
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[&#39;bounceOut&#39;](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[&#39;bounceIn&#39;](t*2, 0, c, d) * 0.5 + b;
}
return Tween[&#39;bounceOut&#39;](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);
}

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!