目 录CONTENT

文章目录

奔跑的小羊

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 15526 阅读 / 5342 字 / 正在检测是否收录...

奔跑的小羊

  • 时间:2019年9月7号
  • 类型:动画和js
  • 人员:魏欣怡

本案例素材联系魏欣怡或下载

效果图

image.png

案例说明

页面上会出现小羊,他们奔跑的速度,频率不一样,小羊也可拖拽

第一步:实现布局效果

<!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>runing sheeps</title>
    <link rel="stylesheet" href="css/wxy.css">
</head>
<body>
    <div class="stage">
        <!-- <div class="sheep"></div> -->
    </div>
    <script src="js/wxy.js"></script>
</body>
</html>

第二步:布局的样式

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
.stage{
   position: relative;
   width: 100%;
   height: 100%;
   background: #4a96ee;
   /* left: 0; */
   /* top: 0; */
}
.sheep{
    position: absolute;
    width: 164px; 
    height: 122px;
    background: url(../img/sheep.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    right: 0;
    bottom: 0;
    cursor:-webkit-grabbing;
}

第三步:实现js

//小羊肖恩  

var sheeps = {
    sPars: {
        frequency: 70, //小羊奔跑的频率
        speed: 7, //移动的速度
        backNum: 0,//刚开始小羊背景图的初始位置
        stage: document.getElementsByClassName('stage')[0],
        maxSheeps: 8 //最多8只羊
    },
    /**
     * @description 入口函数
     */
    init: function () {

        this.creatSheep()

    },
    /**
     * @description 创建小羊的工厂
     */
    creatSheep: function () {
        //因为小羊是多个,我们需要创建一个工厂去创建它
        function SheepClass(data) {
            //创建一个小羊添加到stage里面
            this.sheep = document.createElement('div');
            data.stage.appendChild(this.sheep);
            this.sheep.className = 'sheep';
            //小羊奔跑的频率随机产生
            this.frequency = Math.floor(Math.random() * data.frequency) + 30;
            this.backNum = data.backNum;
            this.speed = data.speed;
            this.stage = data.stage;
            this.top = 0;
            this.currentSpeed = data.speed;
        }
        var _this = this;
        //多长时间创建一只小羊
        var timer = setInterval(function () {
            var sheepNum = _this.sPars.stage.children.length; //舞台上羊的个数
            //如果小羊个数是小于我的最大个数,就继续创建,否则不创建
            if (sheepNum < _this.sPars.maxSheeps) {
                var sheepPlus = new SheepClass(_this.sPars);
                //将每一个创建出来的小羊,都让他动起来
                _this.sheepRun(sheepPlus);
            }

        }, 1000)

    },
    /**
     * 
     * @param {Object} sheepPlus 
     * @description 让小羊奔跑起来的方法
     */
    sheepRun: function (sheepPlus) {
        //让每一个小羊又有一个动画过程
        sheepPlus.sheepAnimate = setInterval(function () {
            //因为这是一张背景图,每一个小羊的片段长度是164,要让小羊动起来,就要变幻这个长度,这个变量就是用来保存的
            sheepPlus.backNum += 164;
            //如果这个背景图的长度到达了1312,就让它再回到0的位置,再次重复运动
            if (sheepPlus.backNum == 1312) {
                sheepPlus.backNum = 0;
            }
            // console.log(backNum);
            sheepPlus.sheep.style.backgroundPosition = -sheepPlus.backNum + 'px ' + sheepPlus.top + 'px';
            //小羊最开始出现的地方离左边的距离在减去每次移动的距离
            var rLeft = sheepPlus.sheep.offsetLeft - sheepPlus.speed;
            //如果移动的距离小于-164,那么就删除,跑到屏幕外,就删除,定时器停止
            if (rLeft <= -164) {
                clearInterval(sheepPlus.sheepAnimate);
                sheepPlus.stage.removeChild(sheepPlus.sheep)
            }
            //否则就把移动的距离赋值给小羊
            sheepPlus.sheep.style.left = rLeft + 'px';
            //这个时间就是小羊移动的频率,所以每一个小羊的频率就不一样
        }, sheepPlus.frequency);


        //拖拽部分
        sheepPlus.sheep.onmousedown = function (e) {
            //当我按下的时候,小羊不会动,所以速度为0
            sheepPlus.speed = 0;
            //切换图片
            sheepPlus.top = -128;
            //获取当前的x,y坐标
            sheepPlus.x = e.pageX;
            sheepPlus.y = e.pageY;
           //移动
            document.onmousemove = function (e) {
                //当前移动的x减去点击时获取的坐标
                var chax = e.pageX - sheepPlus.x;
                var chay = e.pageY - sheepPlus.y;
                //在加上它本身距离左边的坐标
                sheepPlus.sheep.style.left = chax + sheepPlus.sheep.offsetLeft + 'px';
                sheepPlus.sheep.style.top = chay + sheepPlus.sheep.offsetTop + 'px';
                sheepPlus.x = e.pageX;
                sheepPlus.y = e.pageY;
            }

            document.onmouseup = function (e) {
                //清空move
                document.onmousemove = null;
                //再将速度设为当前的速度
                sheepPlus.speed = sheepPlus.currentSpeed;
                //再次切换为原来的背景
                sheepPlus.top = 0;
            }
        }
    }
}
sheeps.init();

0

评论区