案例

一.手风琴案例
$(function(){//创建function
$(“li”).on(“mouseenter”,function(){//创建鼠标进入事件
$(this).stop().animate({//创建自定义动画的函数 stop()函数用于处理动画出现鼠标即使离开动画仍在执行的问题
width:“600px”//将当前对应图片的宽度120过渡到600，200毫秒完成
},200).find(“span”).hide().parent().siblings().stop().animate({//寻找span，当鼠标悬停的的时候让span隐藏，span的同辈元素img都变为宽为120
width:“120px”
}, 200).find(“span”).show().animate({//span变为宽120
width: “120px”
}, 100);
});
});
animate():用于创建自定义动画的函数。
stop():停止所有在指定元素上正在运行的动画。
find():搜索所有与指定表达式匹配的元素。
parent():取得一个包含着所有匹配元素的唯一父元素的元素集合。
siblings():取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
二.飞机大战
三.贪吃蛇
1.创建地图
var Map;
function map(){
this.createMap=function(){
this._map=document.createElement(“div”);//创建地图div
this._map.className=“map”;//类名map
document.body.appendChild(this._map);//body获取地图元素
}
}
2.创建蛇身
var Snack;
function snack(){
this._snack=[[“red”,3,1,null],[“yellow”,2,1,null],[“yellow”,1,1,null]];//创建二维数组
this.direct=“right”;//初始蛇移动状态向右
this.createsnack=function(){
for(var i=0;i<this._snack.length;i++){//遍历数组，将三个数组建立为三个蛇身块
if(this._snack[i][3]==null){
this._snack[i][3]=document.createElement(“div”);
this._snack[i][3].className=“snack”;
this._snack[i][3].style.backgroundColor=this._snack[i][0];
Map._map.appendChild(this._snack[i][3]);
}
this._snack[i][3].style.left=this._snack[i][1]*30+“px”;//设置三个蛇身块的初始位置
this._snack[i][3].style.top=this._snack[i][2]*30+“px”;
}
}
3.蛇身移动
this.snackmove=function(){//设置三个蛇身块从蛇尾开始往蛇头移动
var len=this._snack.length-1;
for(var i=len;i>0;i–){
this._snack[i][1]=this._snack[i-1][1];
this._snack[i][2]=this._snack[i-1][2];
}
switch (this.direct) {//移动方向
case “right”:
this._snack[0][1] += 1;
break;
case “left”:
this._snack[0][1] -= 1;
break;
case “up”:
this._snack[0][2] -= 1;
break;
case “down”:
this._snack[0][2] += 1;
break;
}
//设置蛇头穿墙
if(this._snack[0][1]>29){
this._snack[0][1]=0;
}
if(this._snack[0][1]<0){
this._snack[0][1]=29;
}
if(this._snack[0][2]>19){
this._snack[0][2]=0;
}
if(this._snack[0][2]<0){
this._snack[0][2]=19;
}
setInterval(function(){//蛇身移动动画
Snack.snackmove();
},200)
}
4.创建食物
var Food;
function food() {
this._food = null;
this.x;
this.y;
this.createFood = function () {
//随机数值 用来设置食物随机位置
this.x = Math.floor(Math.random() * 30);
this.y = Math.floor(Math.random() * 20);
if (this._food == null) {
this._food = document.createElement(“div”);
this._food.className = “food”;
Map._map.appendChild(this._food);
}
this._food.style.left = this.x * 30 + “px”;
this._food.style.top = this.y * 30 + “px”;
}
}
5. 增加蛇身长度
//设置当蛇头位置与食物位置一致时 增加蛇身长度
if (this._snack[0][1] == Food.x && this._snack[0][2] == Food.y) {
this._snack.push([
“yellow”,
this._snack[this._snack.length - 1][1],
this._snack[this._snack.length - 1][2],
null]);
Food.createFood();//重新创建食物
}
6.键盘事件
document.body.onkeyup = function (e) {
switch (e.key) {
case “w”:
if (Snack.direct != “down”) {
Snack.direct = “up”;
}
break;
case “a”:
if (Snack.direct != “right”) {
Snack.direct = “left”;
}
break;
case “d”:
if (Snack.direct != “left”) {
Snack.direct = “right”;
}
break;
case “s”:
if (Snack.direct != “up”) {
Snack.direct = “down”;
}
break;
}
}

四.鳄鱼
onkeypress 事件在用户按下并放开任何字母数字键时发生。但是系统按钮（例如：箭头键、功能键）无法得到识别。
onkeydown 事件在用户按下任何键盘键（包括系统按钮）时发生。
五.html5视频
autoplay：自动播放.
pause：视频暂停.
video.currentTime：视频当前的播放速度.
video.duration：视频总时间.