Home Web Front-end H5 Tutorial JS Daily Question - A small demo using JS to achieve seamless switching of images up, down, left, and right through keyboard arrow keys

JS Daily Question - A small demo using JS to achieve seamless switching of images up, down, left, and right through keyboard arrow keys

May 17, 2018 pm 01:46 PM
demo javascript pass keyboard

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

<!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);

}

Copy after login


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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to type underline on the keyboard? How to type only underline without typing? How to type underline on the keyboard? How to type only underline without typing? Feb 22, 2024 pm 07:46 PM

Adjust the input method to English and hold down the Shift key and the minus key. Applicable model of the tutorial: Lenovo AIO520C System: Windows 10 Professional Edition: Microsoft Office Word 2022 Analysis 1 First check the Chinese and English typing of the input method and adjust it to English. 2Then hold down the Shift key and the Minus key on your keyboard at the same time. 3 Check the interface to see the underlined words. Supplement: How to quickly enter underline in Word document 1. If you need to enter an underline in Word, select the space with the mouse, then select the underline type in the font menu to enter. Summary/Notes: Be sure to change the input method to English before proceeding, otherwise the underscore cannot be successfully entered.

How to open the right-click menu through shortcut keys How to open the right-click menu through shortcut keys Jan 14, 2024 pm 03:12 PM

When our mouse temporarily loses its function, how to use keyboard shortcuts to open the right-click menu? There are two methods. One is to press the Shift+F10 shortcut key to adjust the right-click menu, and the other is to use the keyboard shortcut between windows and ctrl. Directory keys can also be used. Let’s take a look at the specific tutorial below. The first method of using keyboard shortcuts to open the right-click menu: 1. When no file is selected on the computer desktop, press the button marked in red circle on the keyboard in the picture below. This button is the button to quickly open the right-click menu. 2. You can open the right-click menu on the desktop. If you need to select an item, just use the mouse to select it. Second method 1. In fact, we can use the "Shift+F10" shortcut key to adjust the right-click menu 2

Keyboard auto-typing on Windows laptop Keyboard auto-typing on Windows laptop Feb 19, 2024 pm 05:33 PM

Computer input devices such as keyboard and mouse require human operation and cannot operate independently. The same goes for the touchpad and keyboard on Windows laptops. Text is not automatically entered, nor is the mouse clicked automatically. If something unusual happens, there must be a reason. If you encounter laptop keyboard auto-typing issues, follow the guide to fix it. Keyboard on Windows Laptop Typing Automatically When the keyboard on your Windows laptop is typing automatically, here’s how you can fix it. Check the keyboard manually Make sure the keyboard is working properly Check if the laptop is connected remotely Check if any autotyping programs are running Run a malware scan Adjust the keyboard settings Reinstall the keyboard driver Let’s know in detail

Maicong K87 three-mode mechanical keyboard adds 'hyacinth axis' and 'ice cream axis' version: Gasket structure, initial price starts at 299 yuan Maicong K87 three-mode mechanical keyboard adds 'hyacinth axis' and 'ice cream axis' version: Gasket structure, initial price starts at 299 yuan Feb 29, 2024 pm 05:00 PM

According to news from this website on February 29, Maicong today launched two versions of "Hyacinth Switch" and "Glazed Ice Cream Switch" for the K87 three-mode mechanical keyboard. The keyboard features "Gasket structure, 80% arrangement", related shaft keyboards The price information is as follows: "Hyacinth Switch" version: initial price is 299 yuan. "Liuguang Ice Cream Switch" version: initial price is 379 yuan. According to reports, the series of keyboards use Gasket structure, 87-key 80% arrangement, full-key rollover, and support thermal For plugging and unplugging, it claims to use "original/MDA two-color PBT keycaps", uses a 1.2mm single-key slotted PCB (lower lamp position), is equipped with RGB lighting effects, and has a magnetic absorption nameplate design. In addition, this keyboard is equipped with a 6000 mAh battery and a wireless delay of 3ms. The official size and size of the keyboard have not been announced.

How to assign Copilot buttons on any keyboard in Windows 11 How to assign Copilot buttons on any keyboard in Windows 11 Feb 20, 2024 am 10:33 AM

Windows 11 computer keyboards that will be launched in the next few months will have a new Copilot key. This key allows users to easily enter co-pilot mode by pressing a designated button without upgrading a new PC. This guide will detail how to set up the copilot button on any Windows 11 keyboard. Microsoft recently announced that they have made important progress in advancing artificial intelligence-assisted driving. Windows 11 will add a dedicated Copilot key to further enhance the experience of PC users. This hardware change represents the first major upgrade to Windows PC keyboards in thirty years. In the coming months, new Windows 11 computers will feature a new Copilot key design on the keyboard

How to set up handwriting input method on Apple mobile phone keyboard How to set up handwriting input method on Apple mobile phone keyboard Mar 08, 2024 pm 02:30 PM

Apple mobile keyboard users want to set up the handwriting input method, but don’t know how to do it. It’s actually very simple. Users can directly select the handwriting input method in the phone’s keyboard settings. If not, they can also manually add a handwriting input method. How to set the handwriting input method on the Apple mobile phone keyboard A: Enable the handwriting input method directly in the keyboard settings 1. When Apple users use the input method, the handwriting input method is enabled by default. 2. Users only need to click and hold the lower left corner to select the handwriting input method while typing. 3. If the user does not have a handwriting input method in his mobile phone, he can also add it manually. 4. The user enters the settings, finds the universal keyboard settings, and adds the handwriting input option to the first keyboard. 5. Use handwriting input method to

VGN co-branded 'Elden's Circle' keyboard and mouse series products are now on the shelves: Lani / Faded One custom theme, starting from 99 yuan VGN co-branded 'Elden's Circle' keyboard and mouse series products are now on the shelves: Lani / Faded One custom theme, starting from 99 yuan Aug 12, 2024 pm 10:45 PM

According to news from this site on August 12, VGN launched the co-branded "Elden Ring" keyboard and mouse series on August 6, including keyboards, mice and mouse pads, designed with a customized theme of Lani/Faded One. The current series of products It has been put on JD.com, priced from 99 yuan. The co-branded new product information attached to this site is as follows: VGN丨Elden Law Ring S99PRO Keyboard This keyboard uses a pure aluminum alloy shell, supplemented by a five-layer silencer structure, uses a GASKET leaf spring structure, has a single-key slotted PCB, and the original height PBT material Keycaps, aluminum alloy personalized backplane; supports three-mode connection and SMARTSPEEDX low-latency technology; connected to VHUB, it can manage multiple devices in one stop, starting at 549 yuan. VGN丨Elden French Ring F1PROMAX wireless mouse the mouse

What does demo mean? What does demo mean? Feb 12, 2024 pm 09:12 PM

The word demo is no longer unfamiliar to friends who like to sing, but many users who have never been exposed to it are curious about what demo means. Now let’s take a look at the meaning of the demo brought by the editor. What does demo mean? Answer: Demo tape. 1. The pronunciation of demo is ['deməʊ] in English and ['demoʊ] in America. 2. Demo is the abbreviation of "demonstration", which generally refers to the preliminary effect of listening to a song before it is officially recorded. 3. Demo is used as a noun to refer to sample tapes and sample records. The meaning of verb is trial (especially software), demonstration and demonstration;

See all articles