原生js (面向对象版) --- 小羊肖恩动画(可拖拽)
这个案例,js部分分两个大块:
1:创建小羊
2: 小羊运动
其中小羊运动部分分3块:
1)小羊在初始位置运动起来
2)小羊在从屏幕右边,运动到屏幕左边
3) 小羊拖拽到屏幕的任意地方,拖拽时小羊停止运动
<!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>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.stage {
width: 100%;
height: 100%;
background-color: #4a96ee;
position: relative;
}
.sheep {
position: absolute;
right:-164px;
bottom: 0;
width: 164px;
height: 122px;
background: url("img/sheep.png") no-repeat ;
background-position: (0,0);
cursor: grabbing;
}
</style>
</head>
<body>
<div class="stage" id="_stage">
<!-- <div class="sheep"></div> -->
</div>
</body>
</html>
<script>
// 创建小羊对象
var sheeps = {
comproperty: {
frequency: 70,//频率
speed: 10,// 速度
maxSheeps : 8,// 屏幕上最大羊的指数
runNum: 0,
stage: document.getElementById('_stage')
},
init: function () {// 初始化函数
this.createSheep();
},
createSheep: function() {// 创建小羊
function SheepClass(data) { // 构造函数
this.sheep = document.createElement("div");// 属性sheep是div
this.sheep.className = "sheep";
this.sheep.stage = data.stage;
this.sheep.speed = data.speed;
this.sheep.currentSpeed = data.speed;
this.runNum = data.runNum;
this.imgTop = 0; /* 背景图片top定位的初始位置*/
this.sheep.frequency = Math.floor(Math.random()*data.frequency + 30);//速率是随机的
data.stage.appendChild(this.sheep);
}
var that = this;// that 保存sheeps这个对象
var timer = setInterval(function(){
if(that.comproperty.stage.children.length < 8)// 舞台上的小羊数小于8只就创建小羊
{
var sheepPlus = new SheepClass(that.comproperty); //创建小羊对象
that.sheepRunning(sheepPlus);// 小羊运动
}
},1000);
},
sheepRunning: function(sheepPlus){ // 小羊运动
/*
运动分两部分
1:小羊运动起来
2:小羊跑起来
*/
sheepPlus.timer = setInterval(function(){
sheepPlus.runNum += 164;
if(sheepPlus.runNum >= 1312)
{
sheepPlus.runNum = 0;
}
// 小羊运动
sheepPlus.sheep.style.backgroundPosition = -sheepPlus.runNum + 'px '+ sheepPlus.imgTop + 'px';
// 小羊跑起来
sheepPlus.sheep.style.left = sheepPlus.sheep.offsetLeft - sheepPlus.sheep.speed + 'px';
if(sheepPlus.sheep.offsetLeft < -164)
{
clearInterval(sheepPlus.timer);
sheepPlus.sheep.stage.removeChild(sheepPlus.sheep);
}
},sheepPlus.sheep.frequency);// 频率随机
// 小羊拖拽
sheepPlus.sheep.onmousedown = function(event){
var event = event || window.event;
var clientX = event.clientX;
var clientY = event.clientY;
sheepPlus.imgTop = -128;
this.speed = 0;
sheepPlus.sheep.style.backgroundPosition = -sheepPlus.runNum + 'px ' + sheepPlus.imgTop + 'px';
document.onmousemove = function(event){
var event = event || window.event;
var moveClientX = event.clientX;
var moveClientY = event.clientY;
sheepPlus.sheep.style.left = moveClientX - clientX + sheepPlus.sheep.offsetLeft + 'px';
sheepPlus.sheep.style.top = moveClientY - clientY + sheepPlus.sheep.offsetTop + 'px';
clientX = moveClientX;// 更新坐标
clientY = moveClientY;// 更新坐标
}
document.onmouseup = function(){
document.onmousemove = null;
sheepPlus.sheep.speed = sheepPlus.sheep.currentSpeed;//速度还原
sheepPlus.imgTop = 0;// 图片的top定位复原
}
}
}
}
sheeps.init();
</script>