大名鼎鼎的汤姆猫,用HTML5制作的。
html代码:
<html> <head> <meta charset="UTF-8"> <title>汤姆猫</title> <style> body,img{ margin: 0; height: 100%; width: 100%; } </style> </head> <body onclick="action(event)"> <img id="tom" src="angry/angry_00.jpg" alt=""> <audio id="player"></audio> <script src="index.js"></script> </body> </html>
js代码:
// 获取img的DOM节点 var img = document.getElementById('tom') var player = document.getElementById('player') // 获取html文档可视窗口的宽高 var w = document.documentElement.clientWidth var h = document.documentElement.clientHeight // 当窗口大小发生变化时重新获取HTML文档的可视窗口的宽和高 window.onresize = function(){ w = document.documentElement.clientWidth h = document.documentElement.clientHeight } function play(name,total,startAt){ var i = 0 animate() function animate(){ // 插入图片的路径 图片一直在更换 造成连贯性的动作 var src = name + '/' + name + '_' + (i < 10 ? + '0':'') + i + '.jpg' //i < 10 ? true:false //三元运算符 //?号前面是一个判断语句 ?号后面是值1:值2 //如果条件为真 得到第一个值(值1) //如果条件为假 得到第二个值(值2) img.src = src if(i < total){ // 延时100毫秒之后执行动画 setTimeout(animate, 100); if(i == startAt){ player.src = 'sounds/' + name + '.m4a' player.play() } if(name == 'knockout' && i == 0){ player.src = "sounds/fall.m4a" player.play() } if(name == 'drink' && i == 11){ player.src = 'sounds/pour.m4a' player.play() } } i++ } } function action(event){ // event.pageX和event.pageY来表示鼠标相对于文档的位置 var x = event.pageX*360 / w var y = event.pageY*640 / h console.log(x) console.log(y) if(x > 80 && x < 120 && y > 110 && y < 200){ play('scratch',55,20) } if(x > 240 && x < 290 && y > 110 && y < 200){ play('pie',23,13) } if(x > 124 && x < 240 && y > 160 && y < 190){ play('cymbal',12,0) } if(x > 155 && x < 210 && y > 190 && y < 230){ play('knockout',80,19) } if(x > 137 && x < 235 && y > 250 && y < 280){ if(x < 185){ play('eat',39,0) } else{ play('drink',80,34) } } if(x > 140 && x < 225 && y > 400 && y < 450){ play('angry',25,0) } if(x > 119 && x < 245 && y > 460 && y < 560){ play('stomach',33,0) } if(x > 125 && x < 175 && y > 570 && y < 620){ play('foot_right',29,0) } if(x > 175 && x < 220 && y > 570 && y < 620){ play('foot_left',29,0) } if(x > 246 && x < 280 && y > 490 && y < 580){ play('fart',27,0) } }
谢谢分享,欢迎回访,自助实体店加盟www.makingh.com