奔跑的小羊
- 时间：2019年9月7号
- 类型：动画和js
- 人员：魏欣怡
本案例素材联系魏欣怡或下载
效果图
案例说明
页面上会出现小羊，他们奔跑的速度，频率不一样，小羊也可拖拽
第一步：实现布局效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>runing sheeps</title>
<link rel="stylesheet" href="css/wxy.css">
</head>
<body>
<div class="stage">
<!-- <div class="sheep"></div> -->
</div>
<script src="js/wxy.js"></script>
</body>
</html>
第二步：布局的样式
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.stage{
position: relative;
width: 100%;
height: 100%;
background: #4a96ee;
/* left: 0; */
/* top: 0; */
}
.sheep{
position: absolute;
width: 164px;
height: 122px;
background: url(../img/sheep.png);
background-position: 0 0;
background-repeat: no-repeat;
right: 0;
bottom: 0;
cursor:-webkit-grabbing;
}
第三步:实现js
//小羊肖恩
var sheeps = {
sPars: {
frequency: 70, //小羊奔跑的频率
speed: 7, //移动的速度
backNum: 0,//刚开始小羊背景图的初始位置
stage: document.getElementsByClassName('stage')[0],
maxSheeps: 8 //最多8只羊
},
/**
* @description 入口函数
*/
init: function () {
this.creatSheep()
},
/**
* @description 创建小羊的工厂
*/
creatSheep: function () {
//因为小羊是多个，我们需要创建一个工厂去创建它
function SheepClass(data) {
//创建一个小羊添加到stage里面
this.sheep = document.createElement('div');
data.stage.appendChild(this.sheep);
this.sheep.className = 'sheep';
//小羊奔跑的频率随机产生
this.frequency = Math.floor(Math.random() * data.frequency) + 30;
this.backNum = data.backNum;
this.speed = data.speed;
this.stage = data.stage;
this.top = 0;
this.currentSpeed = data.speed;
}
var _this = this;
//多长时间创建一只小羊
var timer = setInterval(function () {
var sheepNum = _this.sPars.stage.children.length; //舞台上羊的个数
//如果小羊个数是小于我的最大个数，就继续创建，否则不创建
if (sheepNum < _this.sPars.maxSheeps) {
var sheepPlus = new SheepClass(_this.sPars);
//将每一个创建出来的小羊，都让他动起来
_this.sheepRun(sheepPlus);
}
}, 1000)
},
/**
*
* @param {Object} sheepPlus
* @description 让小羊奔跑起来的方法
*/
sheepRun: function (sheepPlus) {
//让每一个小羊又有一个动画过程
sheepPlus.sheepAnimate = setInterval(function () {
//因为这是一张背景图，每一个小羊的片段长度是164,要让小羊动起来，就要变幻这个长度，这个变量就是用来保存的
sheepPlus.backNum += 164;
//如果这个背景图的长度到达了1312，就让它再回到0的位置，再次重复运动
if (sheepPlus.backNum == 1312) {
sheepPlus.backNum = 0;
}
// console.log(backNum);
sheepPlus.sheep.style.backgroundPosition = -sheepPlus.backNum + 'px ' + sheepPlus.top + 'px';
//小羊最开始出现的地方离左边的距离在减去每次移动的距离
var rLeft = sheepPlus.sheep.offsetLeft - sheepPlus.speed;
//如果移动的距离小于-164,那么就删除,跑到屏幕外，就删除,定时器停止
if (rLeft <= -164) {
clearInterval(sheepPlus.sheepAnimate);
sheepPlus.stage.removeChild(sheepPlus.sheep)
}
//否则就把移动的距离赋值给小羊
sheepPlus.sheep.style.left = rLeft + 'px';
//这个时间就是小羊移动的频率,所以每一个小羊的频率就不一样
}, sheepPlus.frequency);
//拖拽部分
sheepPlus.sheep.onmousedown = function (e) {
//当我按下的时候，小羊不会动，所以速度为0
sheepPlus.speed = 0;
//切换图片
sheepPlus.top = -128;
//获取当前的x,y坐标
sheepPlus.x = e.pageX;
sheepPlus.y = e.pageY;
//移动
document.onmousemove = function (e) {
//当前移动的x减去点击时获取的坐标
var chax = e.pageX - sheepPlus.x;
var chay = e.pageY - sheepPlus.y;
//在加上它本身距离左边的坐标
sheepPlus.sheep.style.left = chax + sheepPlus.sheep.offsetLeft + 'px';
sheepPlus.sheep.style.top = chay + sheepPlus.sheep.offsetTop + 'px';
sheepPlus.x = e.pageX;
sheepPlus.y = e.pageY;
}
document.onmouseup = function (e) {
//清空move
document.onmousemove = null;
//再将速度设为当前的速度
sheepPlus.speed = sheepPlus.currentSpeed;
//再次切换为原来的背景
sheepPlus.top = 0;
}
}
}
}
sheeps.init();
评论区