<!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. 逆战：微信小程序

                                                            微信小程序的生命周期 onLaunch: function(options) { // ...

  2. 指令——history

    作用:查看历史命令 一般用于查看已经输入执行过的命令,也可以作为自己练习时的指标衡量,因为在历史命令里有行号显示.

  3. crmv2项目

    maven -----------------------------------------------------------------------------感谢打赏!

  4. R 数据框的操作

    1.插入一列 根据自带数据集beaver 进行操作,比如插入一列id. > colnames(beaver1) [1] "day" "time" &quo ...

  5. javascript 创建私有变的三个方法

    //方法一 function m() { //这是私有变量 let p = 10; //这是私有方法 function pr() { return false; } //读取或者设置 私有变量和方法 ...

  6. 十、SAP小数需要用引号括起来

    一.我们定义一个浮点型f的变量,然后赋值,检查会报错 二.我们把引号括起来之后,就正常了,如下: 三.输出效果如下: 注意:f类型的变量,输出不是准确值

  7. ZOJ 1409 communication system 双变量型的DP

    这个题目一开始不知道如何下手,感觉很像背包,里面有两个变量,一个带宽B,一个价格P,有n个设备,每个设备有k个可选的器材(只需选一个),每个器材都有自己的B和P, n个设备选n个器材,最终,FB=所有 ...

  8. GDI+应用2

    在上一篇里已经向大家介绍了如何使用GDI+绘制简单的图像,这一片继续向大家介绍其它一些绘图知识.1.首先我们来看下上一片中我们使用过的Pen.Pen的属性主要有: Color(颜色),DashCap( ...

  9. 框架基础学习之--详解web+maven+spring+mybatis+struts框架文件夹作用

    详解web+maven+spring+mybatis+struts框架文件夹作用 1.程序名 2.Mybatis,mybatis是数据持久层,就是和对象类有关系的东西 3.存放java文件,xml,p ...

  10. java基础源码 (4)--reflect包-AnnotatedElement接口

    接口:AnnotatedElement * Represents an annotated element of the program currently running in this * VM. ...