JS+PNG绵羊奔跑动画特效.zip资源-CSDN文库

共2个文件

html：1个

png：1个

版权申诉

javascript

html5

jQuery

184 浏览量 2022-11-24 12:31:10 上传评论收藏 21KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

JS+PNG绵羊奔跑动画特效.zip （2个子文件）

JS+PNG绵羊奔跑动画特效

jiaoben4409

index.html 4KB

sheep.png 19KB

<!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>

评论收藏

内容反馈

版权申诉