JavaScript小练习

简介: JavaScript小练习


html文件


<!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 type="text/css">
         .walk_show{
            width:120px;
            height:182px;
            border:1px solid #333;
            margin:50px auto 0;
            overflow:hidden;
            position:relative;            
        }
        .walk_show img{
           position:absolute;
            left:0px;
          top:0px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
           var oImg = document.getElementById('img01');
            var nowleft = 0;
            function fnMove(){
                nowleft -= 120;
                if(nowleft<-840)
                {
                    nowleft=0;
                }
                oImg.style.left = nowleft + 'px';
            }
           setInterval(fnMove,120);
        }
    </script>
</head>
<body>
    <p>使用下面这张图片制作关键帧动画</p>
    <img src="images/walking.png" alt="人物走路">
    <div class="walk_show">
        <img src="images/walking.png" alt="人物走路" id="img01">
    </div>
</body>
</html>


相关文章
|
5月前
|
存储 JavaScript 前端开发
JS项目练习
JS项目练习
|
4月前
|
JavaScript 前端开发
记录Javascript数组类练习
记录Javascript数组类练习
21 1
|
4月前
|
JavaScript 前端开发
JS循环语句以及一些小练习
JS循环语句以及一些小练习
23 1
|
4月前
|
存储 前端开发 JavaScript
[初学者必看]JavaScript 简单实际案例练习,锻炼代码逻辑思维
【6月更文挑战第2天】这是一个前端小项目合集,包括图片轮播器、动态列表、模态框、表单验证等14个项目,旨在帮助初学者提升编码技能和实战经验。每个项目提供关键提示,如使用HTML、CSS和JavaScript实现不同功能,如事件监听、动画效果和数据处理。通过这些项目,学习者可以锻炼前端基础并增强实际操作能力。
66 2
|
4月前
|
前端开发 JavaScript 搜索推荐
[初学者必看]JavaScript 15题简单小例子练习,锻炼代码逻辑思维
【6月更文挑战第3天】这是一个JavaScript编程练习集,包含15个题目及答案:计算两数之和、判断偶数、找数组最大值、字符串反转、回文检测、斐波那契数列、数组去重、冒泡排序、阶乘计算、数组元素检查、数组求和、字符计数、数组最值和质数判断以及数组扁平化。每个题目都有相应的代码实现示例。
189 1
|
4月前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
53 0
|
4月前
|
JavaScript 前端开发
记录JavaScript练习
记录JavaScript练习
19 0
|
5月前
|
JavaScript 前端开发 C语言
JavaScript编程语法练习
本篇文章是对于javaScript中if ,switch,while ,do-while,,for语法的作业练习.对于我来说也是对自己知识掌握的一种检验.是对js的基础语法进行的一次练习,通过有趣的示例进行练习,使得对于代码能够增加印象,对于知识的掌握更加透彻.
|
5月前
|
存储 JavaScript
JS中相等(==)和等全(===)的区别与练习
JS中相等(==)和等全(===)的区别与练习
35 1
|
5月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
55 0