原生js (面向对象版) --- 小羊肖恩动画(可拖拽)

最新推荐文章于 2022-11-11 15:38:05 发布
最新推荐文章于 2022-11-11 15:38:05 发布
阅读量796 收藏 2
点赞数
分类专栏： js实战案例 文章标签： js面向对象版实现动画 js拖拽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41257129/article/details/88594156
版权

在这里插入图片描述
这个案例，js部分分两个大块：
1：创建小羊
2: 小羊运动
其中小羊运动部分分3块：
1）小羊在初始位置运动起来
2）小羊在从屏幕右边，运动到屏幕左边
3) 小羊拖拽到屏幕的任意地方，拖拽时小羊停止运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body {
            width: 100%;
            height: 100%;
        }
        .stage {
            width: 100%;
            height: 100%;
            background-color:  #4a96ee;
            position: relative;
        }
        .sheep {
            position: absolute;
            right:-164px;
            bottom: 0;
            width: 164px;
            height: 122px;
            background: url("img/sheep.png") no-repeat ;
            background-position: (0,0);
            cursor: grabbing;
        }
    </style>
</head>
<body>
    <div class="stage" id="_stage">
        <!-- <div class="sheep"></div> -->
    </div>
</body>
</html>
<script>
    // 创建小羊对象
    var sheeps = {
        comproperty: {
            frequency: 70,//频率
            speed: 10,// 速度
            maxSheeps : 8,// 屏幕上最大羊的指数
            runNum: 0,
            stage: document.getElementById('_stage')
        },
        init: function () {// 初始化函数
            this.createSheep();
        },
        createSheep: function() {// 创建小羊
            function SheepClass(data) { // 构造函数
                this.sheep = document.createElement("div");// 属性sheep是div
                this.sheep.className = "sheep";
                this.sheep.stage = data.stage;
                this.sheep.speed = data.speed;
                this.sheep.currentSpeed = data.speed;
                this.runNum = data.runNum;
                this.imgTop = 0; /* 背景图片top定位的初始位置*/
                this.sheep.frequency = Math.floor(Math.random()*data.frequency + 30);//速率是随机的
                data.stage.appendChild(this.sheep);
            }
            var that = this;// that 保存sheeps这个对象
            var timer = setInterval(function(){
                if(that.comproperty.stage.children.length < 8)// 舞台上的小羊数小于8只就创建小羊
                {
                    var sheepPlus = new SheepClass(that.comproperty); //创建小羊对象
                    that.sheepRunning(sheepPlus);// 小羊运动
                }
            
            },1000);
            
        },
        sheepRunning: function(sheepPlus){ // 小羊运动
            /*
                运动分两部分 
                1：小羊运动起来
                2：小羊跑起来
            */
            sheepPlus.timer = setInterval(function(){
                sheepPlus.runNum += 164;
                if(sheepPlus.runNum >= 1312)
                {
                    sheepPlus.runNum = 0;
                }
                // 小羊运动
                sheepPlus.sheep.style.backgroundPosition = -sheepPlus.runNum + 'px '+ sheepPlus.imgTop + 'px';
                // 小羊跑起来
                sheepPlus.sheep.style.left = sheepPlus.sheep.offsetLeft - sheepPlus.sheep.speed + 'px';
                if(sheepPlus.sheep.offsetLeft < -164)
                {
                    clearInterval(sheepPlus.timer);
                    sheepPlus.sheep.stage.removeChild(sheepPlus.sheep);
                }
           
            },sheepPlus.sheep.frequency);// 频率随机

            // 小羊拖拽
            sheepPlus.sheep.onmousedown = function(event){
                var event = event || window.event;
                var clientX = event.clientX;
                var clientY = event.clientY;
                sheepPlus.imgTop = -128;
                this.speed = 0;
                sheepPlus.sheep.style.backgroundPosition =  -sheepPlus.runNum + 'px ' + sheepPlus.imgTop + 'px';       
            document.onmousemove = function(event){
                var event = event || window.event;
                var moveClientX = event.clientX;
                var moveClientY = event.clientY;
                sheepPlus.sheep.style.left = moveClientX - clientX + sheepPlus.sheep.offsetLeft + 'px';
                sheepPlus.sheep.style.top = moveClientY - clientY + sheepPlus.sheep.offsetTop + 'px';
                clientX = moveClientX;// 更新坐标
                clientY = moveClientY;// 更新坐标
            }
            document.onmouseup = function(){
                document.onmousemove = null;
                sheepPlus.sheep.speed = sheepPlus.sheep.currentSpeed;//速度还原
                sheepPlus.imgTop = 0;// 图片的top定位复原
            }
            }
}
}
sheeps.init();
</script>
crazy的蓝色梦想
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
sheep.js:JavaScript性能测试库
05-11
Sheep.js：JavaScript性能基准测试 Sheep.js是用于在浏览器中运行性能测试的简单工具。 例子 测试一个简单的功能： sheep . test ( { name : "How fast is Math.random()?" , test : Math . random } ) ; 用参数测试一个函数： sheep . test ( { name : "How fast is Math.round()?" , test : function ( ) { Math . round ( 27.443 ) ; } } ) ; 测试对象上的方法： sheep . test ( { name : "How fast Array.length?" , // The setup function
原生JS案例（面向对象）——按住鼠标实现左右拖动列表
L3gacy
06-23 1766
按住鼠标实现左右拖动列表需求基本结构效果图HTML页面CSS样式实现思路原生JS最终效果实际应用 需求 鼠标在有色部分按下后, 可以对有颜色的部分进行左右拖拽 基本结构效果图 HTML页面 id为box的一个对象 <div class="box" id="box"> <ul class="ul-list"> <li>1</li> <li>2</li>
原生js实现精美放羊动画效果
07-10
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。本人热爱使用原生js实现各种好看的前端页面，从而提高自己的前端开发水平。原生js实现精美放羊动画效果。
羊了个羊游戏前端原生js实现
weixin_64260174的博客
11-11 1333
纯前端和原生js简单实现羊了个羊小游戏 从生成地图到覆盖关系到最后消除 感兴趣的小伙伴可以看一下
Javascript面向对象例子--下雪效果
JustForZR的博客
03-21 3279
javascripts中到底什么是面向对象，直到现在我也很难说清楚，我看了网上的解释也是云里雾里，总觉得有些人故意把这个概念说的太专业，一大堆“深奥”的名词，原型链，构造对象等等，其实对于新手来说，还没理解到原理的地步，就像一个插件，在你没有能力之前，只需要知道如何使用，不用管他的底层原理。所以我自己参考了一些资料，用js面向对象试着写了一个下雪的效果，先来看看效果图。 说一下总体思路：既然是
原生js-面向对象-特效-幻灯片片.zip
09-29
使用原生javascript + 利用面向对象思想，编写PC端幻灯片特效
0原生js-面向对象-无缝轮播图.zip
09-29
使用原生javascript + 使用面向对象思想，编写无缝轮播图特效。
Android4.0.4-原生-软件列表-可精简列表.pdf
11-17
Android4.0.4-原生-软件列表-可精简列表.pdf
JS-:原生JavaScript动画组件库
05-27
JS- 原生JavaScript动画组件库
JavaScript案例-原生ajax
02-16
JavaScript案例-原生ajax
JS模拟多线程
01-19
var Thread = { runNum : 0,  //当前正式运行的线程数 maxNum : 10, //最大同时执行的线程数 -1表示不限 commandList : new Array(),  start : function(){  //window.status = this.runNum;   if(this.maxNum != -1 && this.runNum >= this.maxNum){      return;   }  if(this.commandList.length <= 0){     this.runNum = 0;   return false;   
js+css3绘制卡通狗与爱心冒泡动画特效
06-11
js+css3绘制卡通狗与爱心冒泡动画特效，一款卡通小狗爱心表白动画效果。
一个倒计时的小案例（原生js基于面向对象）
前端晋级之路
07-03 1290
  一个原生js基于面向对象的计时器（小案例），有开始，暂停，继续等功能&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,
JS数据类型
Sheep__Deer的博客
09-11 263
数据类型 js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的 js是动态语言，变量的数据类型可以变 var x=10; //x是数字型 x='lulu'; //x是字符串型 简单数据类型（基本的） 1. number 数字型 <script> var num1 = 010; //八进制 console.log(num1); var num2 = 0x9;//十六进制 co
原生js拖拽（面向对象）
weixin_30800807的博客
09-26 93
代码地址：http://files.cnblogs.com/files/fxnet/%E5%8E%9F%E7%94%9Fjs%E6%8B%96%E6%8B%BD%EF%BC%88%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%EF%BC%89.rar <style> img { width: 200px; height...
vue过渡动画transition、关键帧（keyframes）动画的实现
八佾舞于庭
12-17 2746
要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），或者控制元素的显示隐藏，也可改变元素的状态，这个类描述的是过渡动画结束时元素的状态。 transition动画  vue结合原生css动画: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;...
胡小羊的前端专栏（第16期）
yangxiaofupl的博客
01-14 96
<p> 当前技术热点是什么？什么编程语言在成为主流？技术一直在发展，当我们回头看看，会发现不一样的风景。</p> <h3 id="2021-01-14（第16期）">2021-01-14（第16期）
前端（EasyUI -1.4.1）躺坑之旅
一只奔跑的小羊
06-06 421
作为一个蹩脚前端，已经接触过一段时间EasyUI了，这个框架其实很老了，基本都是一些原生JS操作。我也只能一葫芦画瓢了，有些前端的原理其实并不是那么的理解，但是一般来说基本还是能搞定的，百度下，copy下。这边就记录下一些坑，以便日后查看，也有个借鉴。 DataGrid 组件 定义 表 ：<table id="id" style="width: auto; height: 100%"></table> 工具栏定义 <div id="toolbar...
JS跑马灯
xinjie110120的专栏
03-18 409
通俗简单易懂~直接代码     人品爆发              #boxdiv {padding: 2;border: 1px solid #000000; text-align: center}         #boxdiv li{display: inline-block;width: 100px;border: 1px solid #ccc; text-alig
原生js怎么添加el-button
最新发布
09-01
在原生的JavaScript中，我们可以通过以下步骤来添加el-button： 1. 首先，获取一个父元素的引用，该父元素将包含el-button。可以通过getElementById()、querySelector()等方法获取到父元素的引用。 2. 使用document.createElement()方法创建一个新的按钮元素。这个方法将会创建一个具有指定标签名的元素节点，并返回对该节点的引用。在这种情况下，我们需要创建一个<button>元素。 3. 为新创建的按钮元素设置class或id，以便能够样式化或定位它。例如，可以使用element.className或element.id属性为按钮元素设置class或id。 4. 创建一个文本节点，将按钮的文本设置为所需的文本内容。使用document.createTextNode()方法创建一个新的文本节点，并使用element.appendChild()方法将其添加到按钮元素中。 5. 将新创建的按钮元素添加到父元素中，这样它将显示在父元素中。使用父元素的appendChild()方法将按钮元素作为子节点添加到父元素中。 以下是一个示例代码，演示了如何使用原生JavaScript添加el-button： ```javascript // 获取父元素的引用 var parentElement = document.getElementById("parent"); // 创建一个新的按钮元素 var buttonElement = document.createElement("button"); // 为按钮元素设置class或id buttonElement.className = "el-button"; buttonElement.id = "button"; // 创建一个文本节点，并将文本设置为按钮的内容 var buttonText = document.createTextNode("点击我"); buttonElement.appendChild(buttonText); // 将按钮元素添加到父元素中 parentElement.appendChild(buttonElement); ``` 通过按照上述步骤，我们可以使用原生JavaScript向父元素中添加一个el-button。请注意，上述代码仅为示例，并假设已经有一个`id`为`parent`的父元素存在。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值