1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title></title>
  6.      <style type="text/css">
  7.                      html,body{
  8.                  height: 100%;
  9.                  width: 100%;
  10.              }
  11.                      .stage{
  12.                  height:100%;
  13.                  width:100%;
  14.                  position: relative;
  15.                  background-color: #4a96ee;
  16.                  }
  17.                  .sheep{
  18.                      position: absolute;
  19.                      height: 122px;
  20.                      width: 164px;
  21.                      right: 0px;
  22.                      bottom: 300px;
  23.                      background-image: url(sheep.png);
  24.                      background-repeat: no-repeat;
  25.                      background-position: 0px 0px;
  26.                      cursor: -webkit-grabbing;
  27.                  }
  28.      </style>
  29.      </head>
  30.  
  31.  <body>
  32.  
  33.          <div id="stage" class="stage">
  34.  
  35.          </div>
  36.  
  37.  </div>
  38.          <script src="小羊咩咩.js" type="text/javascript" charset="utf-8"></script>
  39.      </body>
  40.  </html>
  1.  var div=document.getElementsByTagName("div")[0];
  2.  
  3.  function sheepRun(sheep){
  4.  sheep.backPoi=0;
  5.  sheep.top=0;            //背景图片的y坐标
  6.  
  7.      window.setInterval(function(){
  8.      sheep.backPoi=sheep.backPoi-164;
  9.      if(sheep.backPoi==-1312)
  10.      {
  11.          sheep.backPoi=0;
  12.      }
  13.      sheep.style.backgroundPosition=sheep.backPoi+"px "+sheep.top+"px ";
  14.  
  15.      sheep.style.left=sheep.offsetLeft-sheep.speed+"px ";
  16.  sheep.onmousedown=function(e)
  17.  {
  18.      var x=e.pageX;
  19.      var y=e.pageY;
  20.      sheep.x=e.pageX;
  21.      sheep.y=e.pageY;
  22.      i=1;
  23.      //alert("x:"+x+"y:"+y);
  24.      document.onmousemove=function(e){
  25.          i++;
  26.          chax=e.pageX-sheep.x;
  27.          chay=e.pageY-sheep.y;
  28.          console.log("onmousemove被调用"+i+"次 x:"+chax+"  y:"+chay);
  29.          sheep.style.left=sheep.offsetLeft+chax+"px";
  30.          sheep.style.top=sheep.offsetTop+chay+"px";
  31.          sheep.x=e.pageX;
  32.          sheep.y=e.pageY;
  33.          sheep.speed=0;
  34.          sheep.top=-122;
  35.      }
  36.      document.onmouseup=function(e){
  37.          document.onmousemove=null;
  38.          sheep.speed=sheep.staticspeed;
  39.          sheep.top=0;
  40.      }
  41.  
  42.  }
  43.  },100);}
  44.  function createsheeps(){
  45.      var _stage=stage;
  46.      var _sheepRun=sheepRun;
  47.      function createsheep(){
  48.      var sheep=document.createElement("div");
  49.      var num1=Math.floor(Math.random()*600);
  50.      var num2=Math.floor(Math.random()*1500);
  51.      sheep.style.bottom=num1+"px";
  52.      sheep.style.right=num2+"px";
  53.      var num3=Math.floor(Math.random()*30)
  54.      sheep.speed=num3;
  55.      sheep.staticspeed=10;
  56.      sheep.className="sheep";
  57.      _stage.appendChild(sheep);
  58.      _sheepRun(sheep);
  59.  }
  60.      window.setInterval(function(){
  61.          createsheep();
  62.      },1000);
  63.  }
  64.  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. MAC设置允许任何来源

    在升级了macOS Sierra (10.12)版本后在“安全性与隐私”中不再有“任何来源”选项 接下来,我们就打开终端,然后输入以下命令: sudo spctl --master-disable 输 ...

  2. JVM--a == (a = b)基于栈的解释器执行过程

    前言 在翻阅ConcurrentLinkedQueue的代码的时候,发现这样一段代码在JDK源码中总是出现. t != (t = tail) 原先总是以为这不就是 t != t ?很是纳闷,遂Demo ...

  3. Windows Server 2008 R2 ntoskrnl.exe 引起蓝屏故障，重新启动

    前不久在HP ProLiant DL360 G6的服务器上面安装了Windows Server 2008 R2,系统一到晚上凌晨就出现蓝屏.重启现象,并且在 C:\Windows\Minidump 目 ...

  4. Exchange Server 2010邮件策略与遵从性

    本文档附带了一个附档,里面详细的描述了如何在Exchange Server 2010中配置如下内容: 1.邮件分类 2.免责申明 3.配置信息隔离墙 4.邮件审核 5.Exchange 2010与AD ...

  5. 全局保存ajax请求到的数据

    var menuJson = (function() {        var result;        $.ajax({            type: 'get',            u ...

  6. 三十八、SAP设置默认语言

    一.点击系统->用户参数文件->用户数据 二.设置成需要的语言 三.重新登录,并在登录时选择EN 四.进入界面

  7. 001、MySQL查询服务器版本号和当前日期

    SELECT VERSION(), CURRENT_DATE; 不忘初心,如果您认为这篇文章有价值,认同作者的付出,可以微信二维码打赏任意金额给作者(微信号:382477247)哦,谢谢.

  8. Android Studio模拟器无法访问网络

    Android Studio3.5 模拟器无法访问网络的原因?

  9. 使用docker快速体验kali linux

    环境 运行在 64位 机器 企业版的 win10 系统 下载镜像 首先搜索docker download 去官网下载docker:https://www.docker.com/products/doc ...

  10. 三、ReactJS、jsx、 Component 特性

    reactjs特性: 基于组件(Component)化思考 用 JSX 进行声明式(Declarative)UI 设计 使用 Virtual DOM Component PropType 错误校对机制 ...