js实现小猴子走路简单动画

最新推荐文章于 2023-03-29 22:10:51 发布
最新推荐文章于 2023-03-29 22:10:51 发布
阅读量1.7k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyf937175448/article/details/52490113
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100%;
            height: 70px;
            background: url("images/block_brick.png");
            position: absolute;
            top: 300px;
        }
        #box2{
            width: 100%;
            height: 70px;
            background: url("images/block_brick.png");
            position: absolute;
            top: 300px;
        }
        #box3{
            width: 100%;
            height: 70px;
            background: url("images/block_brick.png");
            position: absolute;
            top: 300px;
        }
        img{
            margin-top: 145px;
            margin-left: 600px;
        }
    </style>
</head>
<body>
<img src="images/monkey_run_1" alt="">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
<script src="js/js.js"></script>
<script>
    var oBox1=document.getElementById("box1");
    var oBox2=document.getElementById("box2");
    var oBox3=document.getElementById("box3");
    var aImg=document.getElementsByTagName("img")[0];
    var bWidth=utils.win("clientWidth");
    var i=1;
    utils.css(oBox1,{width:bWidth});
    utils.css(oBox2,{width:bWidth});
    utils.css(oBox3,{width:bWidth});
    utils.css(oBox1,{left:0});
    utils.css(oBox2,{left:-bWidth});
    utils.css(oBox3,{left:-2*bWidth});
    setInterval(function(){
        oBox3.style.left=oBox3.offsetLeft+8+"px";
        i++;
        if(i==9){
            i=1;
        }
        aImg.src="images/monkey_run_"+i+".png";
        if(oBox3.offsetLeft==bWidth){
            oBox3.style.left=-2*bWidth+"px";
        }
        oBox2.style.left=oBox2.offsetLeft+8+"px";
        if(oBox2.offsetLeft==bWidth){
            oBox2.style.left=-2*bWidth+"px";
        }
        oBox1.style.left=oBox1.offsetLeft+8+"px";
        if(oBox1.offsetLeft==bWidth){
            oBox1.style.left=-2*bWidth+"px";
        }
    },30)
</script>
</html>
lyf937175448
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
3款正在走路的猩猩猴子flash动画素材
11-02
3款正在走路的猩猩猴子flash动画素材 3款正在走路的猩猩猴子flash动画素材
前端动画渲染引擎pixi.js系列（8）动画精灵AnimatedSprite实现逐帧动画效果
热门推荐
@黄小泽的个人博客
05-18 1万+
逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转
canvas学习day2——对象版帧动画，小人原地行走踏步，drawimage，根据按键控制小人走动，三目运算符
weixin_41571938的博客
04-28 569
前面就简单的介绍过了，其实就是涉及到几个知识点 1、定时器 2、drawimage函数 3、在画第二章图片之前擦除第一张图片即可 4、CSS精灵技术 也称雪碧技术 效果图 有点慢 将就着看 随便找几张图片 and gif软件制作即可 根据按键控制小人走动 在原本的基础上 1、绑定键盘监听事件，通过按下对应的键来改变小人行走的方向。 2、定时器——每隔一段事件执行清除画布、绘制图像、改变当前帧的值，更新小人位置，下面是需要涉及到的知识 具体思路为 生成实例、清除画布、绘制图像、改变当前帧的值，更新小人位置
奔跑的熊大动画效果JS
qq_64970126的博客
02-17 567
利用动画去尝试制作相应的动画效果 熊的制作思路在于：图片添加了动画效果，在时间范围内渐动改变，关键帧一直在改变，图片被往前拉熊展现奔跑的效果 熊奔跑的制作思路：基础效果盒子移动到水平居中的位置， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt.
在Three.js中如何创建一个人物行走动画以及如何优化人物行走效果，以实现更加自然流畅的动画效果
左本Web3D
03-29 2387
在Three.js中如何创建一个人物行走动画以及如何优化人物行走效果，以实现更加自然流畅的动画效果。通过上面的介绍，我们了解了如何实现Three.js中的人物行走效果，并探讨了如何优化这个效果。在实际开发中，我们需要根据具体的需求和场景选择合适的技术和优化方式，以实现更加高效、自然流畅的人物行走效果。
js鼠标移入移出背景图移动形成的帧动画
木子政锋的博客
02-15 885
这是效果图 首先思路是这样的： ①让背景图移动，可以改变backgroundPositionX的这个属性，我的背景图是这样的， 背景图有16个小图标，宽是800px，每个图标的宽是50px，意思是每次移动50px，移动15次 ②鼠标移入移出时都写个for循环里面加定时器 直接上代码 <div id="app-down-icon"></div> <scrip...
CSS公鸡走路动画js特效
ICode联盟
07-05 150
下载地址CSS+HTML实现的公鸡走路网页动画特效dd:
利用JS（防抖）完成一个简单的小人行走
m0_54072287的博客
01-03 1445
首先有这样一张图片，利用JS改变背景图显示的位置，达到让小人行走的目的 设置一个div，简单写样式让图片左上角的小人显示出来，一个小人的宽高大概就是33px。 <style> div { width: 33px; height: 33px; background-image: url(./img/Actor01-Braver03.png); background-position-x
js简单实现人物行走
weixin_46515050的博客
04-08 2400
样式设置div大小跟一个小人一般大小 div{ width: 32px; height: 32px; background-image: url(./img/Actor01-Braver03.png); background-position-x: 0; background-position-y: 0; position: absolute; left: 0; top: 0; } <di...
前端动画渲染引擎pixi.js系列（10）骨骼动画实现之DragonBones
@黄小泽的个人博客
05-19 1万+
在介绍骨骼动画之前，我先介绍一下DragonBones，它的中文名是龙骨，是一套由Egret团队制作的独立的骨骼动画编辑器，我们PIXI播放骨骼动画所需的图片和JSON数据都是从该编辑器生成和导出的。想了解DragonBones可以在百度上搜索“白鹭时代”或者访问网页：https://www.egret.com/。主页的“产品”栏中就有DragonBones项，如下图所示。 进入Drag
JS编写人物行走动画
天飓的技术博客
03-02 1641
首先找一张人物行走的分解图，然后，将这张图作为背景，通过background-position来定位某一个分解动作。这个操作通过CSS定义就可实现，代码如下： .ai_girl{ position:absolute; top:50px; left:10px; width:64; height:64; background-image:url(image/girl.gif); backgroun...
javascript人物行走动画效果
05-13
javascript人物行走动画，注释完美，面向对象。使用方便(ie有效)
html5+js模拟人物走动
08-08
html5+js可以做很多动画 特效 游戏 ；欢迎大家下载
用JS实现的 内含两套不同思路的源码
07-12
用JS实现的 内含两套不同思路的源码 内含两个压缩包，解压后即可用浏览器运行游戏
猴子游戏：猴子在地上行走，跳过障碍
02-26
猴子游戏：猴子在地上行走，跳过障碍
JS实现的小火箭发射动画效果示例
10-17
主要介绍了JS实现的小火箭发射动画效果,涉及javascript基于时间函数的页面元素属性动态变换实现运动效果相关操作技巧,需要的朋友可以参考下
原生javascript实现的一个简单动画效果
11-23
javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px; height:50px; background-color:green; position:absolute; } </style> <script type="tex
JS实现的简单折叠展开动画效果示例
12-02
本文实例讲述了JS实现的简单折叠展开动画效果。分享给大家供大家参考，具体如下： <!DOCTYPE = html> <html> <head> <title>www.jb51.net JS折叠展开动画</title> <style> ...
前端js实现动画效果
遇见小美好
02-01 785
今天我们来模拟animate动画库实现几个动画效果； 首先，在html文件创建一个div元素作为运动物体吧☺️ <div id="move"></div> 其次，在css文件里写几个简单样式吧☺️ #move { position: absolute; width: 30px; height: 30px; border-radius: 100%; background-color: red; } 接下来，主要的运
javascript写字技巧_js canvas实现写字动画效果
最新发布
06-13
7. 使用JavaScript的定时器函数setInterval()不断更新字母的位置，从而实现动画效果。 下面是一个简单的示例代码： HTML代码： ```html <canvas id="myCanvas" width="500" height="200"></canvas> ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值