<!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. （三）微信小程序配置

    小程序官方文档 全局配置

  2. NO9 Linux快捷键整理及最常用命令

    Linux快捷键整理及最常用命令 常用快捷键: Ctrl + u            删除光标之前到行首的字符 Ctrl + k            删除光标之前到行尾的字符 Ctrl + c   ...

  3. 微信浏览器 UA

    mozilla/5.0 (linux; android 5.1.1; mi note pro build/lmy47v) applewebkit/537.36 (khtml, like gecko) ...

  4. Linux基础之防火墙

    Linux基础之防火墙 Iptables   最初认识iptables还是在安卓手机上玩tiny的时候知道的,什么扫地僧.Jume等防跳脚本都基于iptables原理,一直觉得iptables的命令很 ...

  5. Centos7安装rabbitMQ3.6.0

    文章中的erlang和rabbitmq3.6.0 http://pan.baidu.com/s/1c2Nn64w ​ Centos7 系统操作 cd /etc/yum.repos.d/ mv Cent ...

  6. vue学习（十二）vue全家桶 Vue-router&Vuex

    一 vue-router的安装 二 vue-router的基本使用 三 命名路由 四 动态路由的匹配和路由组件的复用 一 vue-router的安装 NPM npm install vue-route ...

  7. location - 修改url后 - 重新加载

    window.location.href = window.location.pathname + search;

  8. ubuntu下解压.zip文件乱码

    解决方法 查看文件: lsar BA_schur.zip 解压文件: unar BA_schur.zip

  9. MVC三层架构在各框架中的特征

    转一篇写得很棒的文章:https://my.oschina.net/win199176/blog/208171?p=7&temp=1495894148424 1.基于web开发中最原始的jsp ...

  10. poj_3461 KMP算法解析

    A - Oulipo Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit S ...