<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3动画-奔跑吧！绵羊 | jQuery特效|手机微信网站特效| 脚本之家</title>
<meta name="keywords" content="SVG特效, 手机微信网站特效, css3动画, html5特效, 脚本之家" />
<meta name="description" content="脚本之家-专注于HTML5、CSS3、js、jQuery、手机移动端等脚本之家的手机与分享。特效库始终坚持：无会员、无积分、无限制的“三无原则”，所有的资源都免费提供广大童鞋下载学习和使用。" />
<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>
<div style="display:none"><script src="http://demo.jb51.net/js/tj.js"></script></div>
<script src="http://demo.jb51.net/js/yxj.js" type="text/javascript"></script>
</body>
</html>
