JS写一起贪吃蛇

  • 时间:2018-06-16 23:01 作者:下班很无聊 来源:下班很无聊 阅读:95
  • 扫一扫,手机访问
摘要:一、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)
最新发布的资讯信息
【系统环境|服务器应用】PHP和Python实战bcrypt算法(2019-02-01 20:47)
【系统环境|服务器应用】PostgreSQL数据库安装Version10.5(2019-02-01 20:47)
【系统环境|服务器应用】Notepad++快速选中多行(2019-02-01 20:47)
【系统环境|服务器应用】Clover支持目录多标签页(2019-02-01 20:47)
【系统环境|服务器应用】计算机视觉 OpenCV Android | Mat像素操作(2019-02-01 20:46)
【系统环境|服务器应用】PHP | 运算符 知识梳理与运用实例(2019-02-01 20:46)
【系统环境|服务器应用】人工智能通识-数学-零基础矩阵运算(2019-02-01 20:46)
【系统环境|服务器应用】Android-打包AAR步骤以及最为关键的注意事项!(2019-02-01 20:46)
【系统环境|服务器应用】回转寿司你肯定吃过!——Android消息机制(构造)(2019-02-01 20:46)
【系统环境|服务器应用】Android中不规则形状View的布局实现(2019-02-01 20:46)
手机二维码手机访问领取大礼包
返回顶部