<!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. 吴裕雄--天生自然java开发常用类库学习笔记：NumberFormat

    import java.text.* ; public class NumberFormatDemo01{ public static void main(String args[]){ Number ...

  2. ArcoLinux安装完成后的的配置

    ArcoLinux安装完成后的的配置 这可能是全网第一篇Arcolinux的教程 1. 更改源 修改/etc/pacman.d/mirrorlist 在最头上增加清华源 Server = https: ...

  3. Golang的变量定义及使用案例

    Golang的变量定义及使用案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.变量的定义 package main import "fmt" func m ...

  4. P 1008 数组元素循环右移问题

    转跳点:

  5. C语言备忘录——static

    对于这个关键字我一直没有弄清楚,今天特地去花了一定的时间去理解这个关键字.在函数或变量声明时,在数据类型前加上 static 后会有以下几个效果 一.用于函数定义时: 1.函数的链接属性会被修改,从e ...

  6. UVA - 679 Dropping Balls（二叉树的编号）

    题意:二叉树按层次遍历从1开始标号,所有叶子结点深度相同,每个结点开关初始状态皆为关闭,小球从根结点开始下落(小球落在结点开关上会使结点开关状态改变),若结点开关关闭,则小球往左走,否则往右走,给定二 ...

  7. bzoj 1369: [Baltic2003]Gem

    确实是神2333333333,一开始以为是01染色sb题,然而被打脸... (蒟蒻不乱说,网上各种神犇的题解,还有图!!) #include <bits/stdc++.h> #define ...

  8. 十三、SAP中定义变量时赋初始值

    一.代码如下 二.输出如下

  9. 解决Java POI 导出Excel时文件名中文乱码，兼容浏览器

    String agent = request.getHeader("USER-AGENT").toLowerCase(); response.setContentType(&quo ...

  10. 5分钟搞懂：JWT(Json Web Token)

    https://www.qikegu.com/easy-understanding/892 JWT 基于token的用户认证原理:让用户输入账号和密码,认证通过后获得一个token(令牌),在toke ...