JS+PNG绵羊奔跑动画特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS+PNG绵羊奔跑动画特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS+PNG图片制作绵羊奔跑特效</title>

<style>
	.stage{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background-color:rgb(38, 145, 201);
		overflow:hidden;

	}
	.sheep{
		width:154px;
		height:117px;
		background-image:url('sheep.png');
		background-position:0 0;
		position:absolute;
		right:0;
		bottom:50px;
		background-repeat:no-repeat;
		cursor:-webkit-grabbing;
	}
</style>
</head>
<body>
<div class="stage" id="stage">
</div>
<script>
	var stage=document.getElementById("stage");
	var SHEEP_WIDTH=164,TRAN_SPEED=10,SPRIPT_SPEED=70;
	var screenWidth=window.innerWidth;
	window.onresize = function(){
		screenWidth=window.innerWidth;
	}
			createSheep();
	var create=setInterval(createSheep,1500);
	//创建小羊
	function createSheep(){
		//限制最多9只小羊
		sheeps=stage.childNodes;
		if(sheeps.length>8){
			return false;
		}
		var sheep=new Sheep();
		setMove(sheep);
	}
	//初始化小羊
	function Sheep(){
		this.tran_y=0;
		this.sprit_left=0;
		this.spriptSpeed=SPRIPT_SPEED+20*Math.random();
		this.tranSpeed=TRAN_SPEED+TRAN_SPEED*Math.random();
		this.tran_x=SHEEP_WIDTH+400*Math.random();
		this.sheepDom=document.createElement("div");
		this.sheepDom.className="sheep";
		this.sheepDom.style.transform='translate3d('+SHEEP_WIDTH+'px, 0, 0)';
		stage.appendChild(this.sheepDom);
		this.spritTop=0;
		this.catch=false;
		this.x=0;
		this.y=0;
	}
	//移动的小羊
	function setMove(sheep){
		var sprit=setInterval(spritMove,sheep.spriptSpeed);
		var walkl=setInterval(walkMove,sheep.spriptSpeed);
		//改变背景图片位置
		function spritMove(){
			if(sheep.sprit_left<(SHEEP_WIDTH*7)){
				sheep.sprit_left=sheep.sprit_left+SHEEP_WIDTH;
			}else{
				sheep.sprit_left=0;
			}
			sheep.sheepDom.style.backgroundPosition=-sheep.sprit_left+'px '+sheep.spritTop+'px';
		}
		//小羊移动
		function walkMove(){
			sheep.sheepDom.style.transform='translate3d('+sheep.tran_x+'px, '+sheep.tran_y+'px, 0)';
			if(sheep.tran_x>-(screenWidth+SHEEP_WIDTH+100)){
				sheep.tran_x=sheep.tran_x-sheep.tranSpeed;
			}else{
				clearInterval(walkl);
				clearInterval(sprit);
				stage.removeChild(sheep.sheepDom);
				sheep=null;
			}
		}
		//鼠标按下
		sheep.sheepDom.addEventListener('mousedown',function(ev){
			sheep.spritTop=-128;
			sheep.tranSpeed=0;
			sheep.catch=true;
			var oEvent = event || ev;
			sheep.x=oEvent.pageX;
			sheep.y=oEvent.pageY;
		},false);
		//鼠标移开
		sheep.sheepDom.addEventListener('mouseup',function(){
			if(sheep.catch){
				sheep.spritTop=0;
				sheep.tranSpeed=TRAN_SPEED+TRAN_SPEED*Math.random();
				sheep.catch=false;
				sheep.tran_y=0;
			}
		},false);
		//鼠标离开
		sheep.sheepDom.addEventListener('mouseout',function(ev){
			if(sheep.catch){
				sheep.spritTop=0;
				sheep.tranSpeed=TRAN_SPEED+TRAN_SPEED*Math.random();
				sheep.catch=false;
				sheep.tran_y=0;
			}

		},false);
		//鼠标移动，鼠标移动是有问题的，不应该存在鼠标从小羊身上移开的情况，因为此时小羊应该随着鼠标移动
		sheep.sheepDom.addEventListener('mousemove',function(ev){
			if(sheep.catch){
				var oEvent = event || ev;
				sheep.tran_x=sheep.tran_x-(sheep.x-oEvent.pageX);
				sheep.tran_y=sheep.tran_y-(sheep.y-oEvent.pageY);
				sheep.sheepDom.style.transform='translate3d('+sheep.tran_x+'px, '+sheep.tran_y+'px, 0)';
				sheep.x=oEvent.pageX;
				sheep.y=oEvent.pageY;
			}
		},false);
	}
</script>

</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)