<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     <style type="text/css">

                     html,body{

                 height: 100%;

                 width: 100%;

             }

                     .stage{

                 height:100%;

                 width:100%;

                 position: relative;

                 background-color: #4a96ee;

                 }

                 .sheep{

                     position: absolute;

                     height: 122px;

                     width: 164px;

                     right: 0px;

                     bottom: 300px;

                     background-image: url(sheep.png);

                     background-repeat: no-repeat;

                     background-position: 0px 0px;

                     cursor: -webkit-grabbing;

                 }

     </style>

     </head>

 <body>

         <div id="stage" class="stage">

         </div>

 </div>

         <script src="小羊咩咩.js" type="text/javascript" charset="utf-8"></script>

     </body>

 </html>
 var div=document.getElementsByTagName("div")[0];

 function sheepRun(sheep){

 sheep.backPoi=0;

 sheep.top=0;            //背景图片的y坐标

     window.setInterval(function(){

     sheep.backPoi=sheep.backPoi-164;

     if(sheep.backPoi==-1312)

     {

         sheep.backPoi=0;

     }

     sheep.style.backgroundPosition=sheep.backPoi+"px "+sheep.top+"px ";

     sheep.style.left=sheep.offsetLeft-sheep.speed+"px ";

 sheep.onmousedown=function(e)

 {

     var x=e.pageX;

     var y=e.pageY;

     sheep.x=e.pageX;

     sheep.y=e.pageY;

     i=1;

     //alert("x:"+x+"y:"+y);

     document.onmousemove=function(e){

         i++;

         chax=e.pageX-sheep.x;

         chay=e.pageY-sheep.y;

         console.log("onmousemove被调用"+i+"次 x:"+chax+"  y:"+chay);

         sheep.style.left=sheep.offsetLeft+chax+"px";

         sheep.style.top=sheep.offsetTop+chay+"px";

         sheep.x=e.pageX;

         sheep.y=e.pageY;

         sheep.speed=0;

         sheep.top=-122;

     }

     document.onmouseup=function(e){

         document.onmousemove=null;

         sheep.speed=sheep.staticspeed;

         sheep.top=0;

     }

 }

 },100);}

 function createsheeps(){

     var _stage=stage;

     var _sheepRun=sheepRun;

     function createsheep(){

     var sheep=document.createElement("div");

     var num1=Math.floor(Math.random()*600);

     var num2=Math.floor(Math.random()*1500);

     sheep.style.bottom=num1+"px";

     sheep.style.right=num2+"px";

     var num3=Math.floor(Math.random()*30)

     sheep.speed=num3;

     sheep.staticspeed=10;

     sheep.className="sheep";

     _stage.appendChild(sheep);

     _sheepRun(sheep);

 }

     window.setInterval(function(){

         createsheep();

     },1000);

 }

 createsheeps();

奔跑的绵羊js的更多相关文章

  1. JS+CSS3人物奔跑动画

    查看效果:http://hovertree.com/texiao/jquery/58/ 效果图: 代码: <!DOCTYPE html> <html> <head> ...

  2. js 原型链和继承（转）

    在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var ob ...

  3. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  4. 转自知乎大神----JS 的 new 到底是干什么的？

    大部分讲 new 的文章会从面向对象的思路讲起,但是我始终认为,在解释一个事物的时候,不应该引入另一个更复杂的事物. 今天我从「省代码」的角度来讲 new. --------------------- ...

  5. js声明变量的三种方式及作用域

      js声明变量的三种方式及作用域 CreateTime--2017年9月11日17:19:11 Author:Marydon 一.参考链接 本篇文章的创作灵感来源于博主-奔跑的铃铛关于js中cons ...

  6. js面向(基于)对象编程—类(原型对象)与对象

    JS分三个部分: 1. ECMAScript标准--基础语法 2. DOM  Document Object Model 文档对象模型 3. BOM  Browser Object Moldel 浏览 ...

  7. Node.js 网页爬虫再进阶，cheerio助力

    任务还是读取博文标题. 读取app2.js // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // cheerio模块, ...

  8. Node.js 网页瘸腿稍强点爬虫再体验

    这回爬虫走得好点了,每次正常读取文章数目总是一样的,但是有程序僵住了情况,不知什么原因. 代码如下: // 内置http模块,提供了http服务器和客户端功能 var http=require(&qu ...

  9. Node.js 网页瘸腿爬虫初体验

    延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...

随机推荐

  1. J. Cola

    J. Cola time limit per test 4.0 s memory limit per test 64 MB input standard input output standard o ...

  2. 如何用naviecat批量创建mysql数据

    1.参考博文:https://blog.csdn.net/lelly52800/article/details/87267096 2.excel要与表结构一致 3.右键,导入向导,选择相应版本,点击“ ...

  3. django 中从外界借助多个网站时 static 的存放和整理

    在 模板之家中  前端页面直接上去抓取  可是遇到重复  或者 版本不统一  所以 在每个app下面建立自己的 stastic 在制作的html  页面上方 导入静态页面 {% load static ...

  4. InvalidOperationException: Cannot create a DbSet for 'IdentityUserClaim<string>' because this type is not included in the model for the context.

    An unhandled exception occurred while processing the request. InvalidOperationException: Cannot crea ...

  5. 12.swoole学习笔记--锁机制

    <?php //创建锁对象 $lock=new swoole_lock(SWOOLE_MUTEX);//互斥锁 echo "创建互斥锁\n"; //开始锁定 主进程 $loc ...

  6. 064-PHP函数中局部变量在函数外不可使用

    <?php function print_num(){ //定义函数 $x=6; //在函数中定义变量 } print_num(); //调用函数 echo $x; ?>

  7. mencoder及ffmpeg的基本命令

    前段时间想在ubuntu下对视频进行格式转换,多方查找之后,接触了mencoder与ffmpeg. mencoder mencoder 是一款命令行方式的视频处理软件,是Mplayer自带的编码工具, ...

  8. 8. Redis 持久化对生产环境的灾难恢复的意义

    1.故障发生的时候会怎么样2.如何应对故障的发生 很多同学,自己也看过一些redis的资料和书籍,当然可能也看过一些redis视频课程 所有的资料,其实都会讲解redis持久化,但是有个问题,我到目前 ...

  9. codeforces 594

    D 给你一个长度为n的括号序列,然后你可以选择交换两个位置,你需要使得能够变成 合法括号序列的起点最多. 题解 人尽皆知的东西:合法的括号序列是,令'('为1,')'为-1,那么前缀和需要>=0 ...

  10. 细说 OLAP 与 OLTP

    OLAP (Online analytical processing)[联机分析处理] 起源 数据库概念最初源于1962年Kenneth Iverson发表的名为"A Programming ...