JS每日一题-小demo之JS实现通过键盘方向键操作图片上下左右无缝切换

PHP中文网 • 2025年3月11日 04:35:13 • 编程技术 • 阅读 2

nbsp;html>Document.wrap {margin: 150px auto;position: relative;width: 400px;height: 300px;overflow: hidden;border: 2px solid #000;} .wrap img {position: absolute;}
(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});}})(); //动画形式公式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)  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);}

登录后复制

以上就是JS每日一题-小demo之JS实现通过键盘方向键操作图片上下左右无缝切换的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2910618.html