JS写一起贪吃蛇

  • 时间:2018-06-16 23:01 作者:下班很无聊 来源:下班很无聊 阅读:160
  • 扫一扫,手机访问
摘要:一、HTML二、CSS img{ margin: 10px; width:200px; height:300px; float: left; }三、scriptwindow.onload=function(){ var aImg=document.getElementsByTagName('

一、HTML

二、CSS

img{

margin: 10px;

width:200px;

height:300px;

float: left;

}

三、script

JS写一起贪吃蛇

JS写一起贪吃蛇

window.onload=function(){

var aImg=document.getElementsByTagName('img');

for (var i = 0; i < aImg.length; i++) {

aImg[i].timer=null;

aImg[i].onmouseover=function(){

startMove(this,500);

}

aImg[i].onmouseout=function(){

startMove(this,300);

}

};

}

function startMove(obj,iTarget){

clearInterval(obj.timer);

// 对每个对象设置定时器

obj.timer=setInterval(function(){

var iSpeed=(iTarget-obj.offsetHeight)/8;

var iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

if (obj.offsetHeight==iTarget) {

clearInterval(obj.timer);

}

else{

obj.style.height=obj.offsetHeight+iSpeed+'px';

}

},30)

}

四、效果图

JS写一起贪吃蛇

JS写一起贪吃蛇

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】WEB前端学习:JS实现中文简体繁体切换(2019-08-22 12:38)
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部