<!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. C++ 非白名单程序间接启动

    主要的思路是不能用不受信任的程序直接参与创建进程,而是间接启动目标进程.比如你可以把目标程序创建快捷方式,然后设置快捷键.然后向桌面发快捷键的按键消息,目标程序就会被桌面程序启动.

  2. Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询

    实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...

  3. 微信小程序调用用百度地图天气功能

    #小程序之调用百度地图天气功能 本篇博客主要介绍小程序在百度地图中获取天气信息,如有不全请指出.下面先上效果图 主要内容 百度地图API的个人密钥,也就是AK 请求百度地图API接口数据 获取到的信息 ...

  4. ubuntu12.04 eclipse安装PyDev

    在ubuntu软件中心安装的eclipse版本为3.7,install new software时,搜索出来的PyDev版本较高(5.6...): 高版本的PyDev要求较高版本的eclipse.详情 ...

  5. C++ do while无限循环~

    #include<iostream> using namespace std; #include<Windows.h> int main() { ; ; system(&quo ...

  6. css mix-blend-mode 颜色滤镜混合模式

    CSS3混合模式种类 在CSS3混合模式中,目前仅有16种:normal,multiply,screen,overlay,darken,lighten,color-dodge,color-burn,h ...

  7. bat 卸载程序的脚本

    @echo off :: BatchGotAdmin :------------------------------------- REM --> Check for permissions & ...

  8. python常用代码、问题汇总

    1.生成dataframe数据 5.读取带 ','分隔符的txt文件 4.DataFrame格式数据处理中报错 2.安装库时出现如下错误: 3.得到股票交易日数据 1.生成dataframe数据 im ...

  9. java String字符串判断

    判断空字符串:StringUtils.isBlank StringUtils.isBlank(null) = true StringUtils.isBlank("") = true ...

  10. 2020牛客寒假算法基础集训营4 G音乐鉴赏

    题目描述 作为“音乐鉴赏”课的任课老师,你的课程作为刷学分好课一直受到广泛欢迎.但这一学期,学校制定了新的标准,你的课的优秀率(分数超过90分的人数)被限制在10%以下! 为了应对这个调整,你要求所有 ...