day 15 运动（map、dom运动）

最新推荐文章于 2024-09-14 17:54:00 发布
最新推荐文章于 2024-09-14 17:54:00 发布
阅读量67 收藏
点赞数
文章标签： html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/serendipitymm/article/details/120328832
版权
这篇博客介绍了JavaScript中实现DOM元素的各种动画效果，包括匀速运动、往返匀速运动、匀速透明运动、缓冲运动和反弹运动。通过设置定时器改变元素的位置和透明度，实现了平滑的动画过渡。这些基础的动画技巧对于前端开发者来说是必备的知识点。
摘要由CSDN通过智能技术生成

目录

一、map

二、Dom运动

匀速运动

往返匀速运动

匀速透明运动

缓冲运动

反弹运动

一、map

map：映射，由键值对构成的元素集合

let map = new  Map（）；

set（key，value）向集合中添加一个元素：key已存在，则为改，不存在则为增

get（键）：根据key去取值

delete（键）：删除集合中某个数

has（键）：判断集合中是否有某个值

clear（）：清空集合

遍历：for（let item of map）{

        console.log（item[0],item[1]）

}

二、Dom运动

匀速运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width:100px;
            height:100px;
            background-color: aquamarine;
            position: absolute;
            top:200px;
        }
    </style>
</head>
<body>
    <div class='box'></div>
    <button class='but'>开始</button>
</body>
</html>
<script>
    let mDiv=document.querySelector(".box")
    let mBut=document.querySelector(".but")
    let time=null;
    function startmove(obj,target){
        clearInterval(time);
        time=setInterval(function(){
            obj.style.left=obj.offsetLeft+5+'px';
            if(obj.offsetLeft==target){
            clearInterval(time)
        }
        },50)
        

    }
    mBut.onclick=function(){
        startmove(mDiv,500)
    }
</script>

往返匀速运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width:100px;
            height:100px;
            background-color: aquamarine;
            position: absolute;
            top:200px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div class='box'></div>
    <button class='but'>左</button>
    <button class='but'>右</button>
</body>
</html>
<script>
    let mDiv=document.querySelector(".box")
    let mBut=document.querySelectorAll(".but")
    let time=null;
    function startmove(obj,target){
        clearInterval(time);
        time=setInterval(function(){
            
        obj.style.left=obj.offsetLeft+(target>obj.offsetLeft?5:-5)+'px';
        if(obj.offsetLeft+(target>obj.offsetLeft?5:-5)==target){
            clearInterval(time);
        }
        },50)
        

    }
    mBut[0].onclick=function(){
        startmove(mDiv,0)
    }
    mBut[1].onclick=function(){
        startmove(mDiv,500)
    }
</script>

匀速透明运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: url(./img/图片1.png);
            background-size:100% ;
            position: absolute;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>
<script>
    let mBox=document.querySelector("div")
    let time=null;
    function startChange(obj,target){
        clearInterval(time)
        time=setInterval(function(){
            let speed=getComputedStyle(obj,false)["opacity"]>target?-0.05:0.05;
            obj.style.opacity=+getComputedStyle(obj,false)["opacity"]+speed;
            if(getComputedStyle(obj,false)["opacity"]==target){
                clearInterval(time)
            }
        },50)
    }
    mBox.onmouseover=function(){
        startChange(mBox,1)
    }
    mBox.onmouseout=function(){
        startChange(mBox,0)
    }
</script>

缓冲运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width:100px;
            height:100px;
            background-color: aquamarine;
            position: absolute;
            top:200px;
        }
    </style>
</head>
<body>
    <div class='box'></div>
    <button class='but'>开始</button>
</body>
</html>
<script>
    let mDiv=document.querySelector(".box")
    let mBut=document.querySelector(".but")
    let time=null;
    function startMove(obj,target){
        clearInterval(time)
        time=setInterval(function(){
            let speed=(target-obj.offsetLeft)/10;
            speed>0?Math.ceil(speed):Math.floor(speed);
            obj.style.left=obj.offsetLeft+speed+"px";
            if(obj.offsetLeft==target){
                clearInterval(time)
            }


        },50)
    }
    mBut.onclick=function(){
        startMove(mDiv,800)
    }
</script>

反弹运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width:80px;
            height:80px;
            background-color: aquamarine;
            position: absolute;
            top:200px;
            border-radius:50% ;
        }
    </style>
</head>
<body>
    <div class='box'></div>
    <button class='but'>开始</button>
</body>
</html>
<script>
    let mDiv=document.querySelector(".box")
    let mBut=document.querySelector(".but")
    function startMove(obj){
        let speedX=10;
        let speedY=10;
        time=setInterval(function(){
            if(obj.offsetLeft<0||obj.offsetLeft>innerWidth-obj.offsetWidth){
                speedX *=-1
            }
            if(obj.offsetTop<0||obj.offsetTop>innerHeight-obj.offsetHeight){
                speedY*=-1
            }
            obj.style.left=obj.offsetLeft+speedX+"px"
            obj.style.top=obj.offsetTop+speedY+"px"
            
        },50)
    }
    mBut.onclick = function(){
		startMove(mDiv);
	}
  
</script>

serendipitymm
关注
day01—JSX创建虚拟DOM元素
Evelyn的前端学习之路
06-15 259
react
React学习笔记day2 React组件 dom操作ref
weixin_46728068的博客
11-10 1008
1.React组件父子组件通信 父组件通过在子组件的标签上添加属性传递给子组件（函数也可以），子组件通过this.props接收父组件传递过来的值。 父组件中 getListItems(){ return this.state.list.map((value,index) => { //return () 可以写多行 //父组件通过属性传递子组件 return<TodoItems content
2020-11-15
qq_42376937的博客
11-15 109
DOM4J解析——二 1.要求： （1）解析文档。 （2）把解析出来的book封装成为对象，并且放置到map集合中。 2.需要解析的文档 3.开始解析 package com.work.day25; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import java.util.Map.Entry; import java.util.Set; import
java 字符串转dom对象_JSON字符串和java对象的互转【json-lib】
weixin_39628247的博客
02-24 2133
转自：http://transcoder.baiducontent.com/from=844b/bd_page_type=1/ssid=0/uid=0/pu=usm%401%2Csz%401320_2001%2Cta%40iphone_1_10.3_3_603/baiduid=D4B2D16A8145B0CD774F0F7D9DC54B5A/w=0_10_/t=iphone/l=3/tc?ref=...
利用dom4j解析xml--天气预报
yunjie167的专栏
01-12 1692
解析xml之前我们先获取下xml文件,这里以天气预报接口为例, 在浏览器里输入http://wthrcdn.etouch.cn/WeatherApi?city=杭州就可以获取到杭州的当天天气. 将获取到的网页保存为xml文件.网页部分内容为: 我将所有的节点收缩起来查看 主要有环境,昨天预报,未来天气预报,生活指数等.这里我们以解析未来天气预报和生活指数为例.
Java Study Notes_Design in 2023（Day15~）
stange1的博客
01-31 465
15.3 异常处理 15.4 集合概述和分类 15.4.1 集合名称图 15.5 Collection集合的常用方法 15.6 Collection集合遍历方式 15.6.1 迭代器遍历集合 15.6.2 增强for遍历集合 15.6.3 forEach遍历集合 15.7 Collection集合子接口之List单链集合 15.7.2 ArrayList底层的原理 15.7.3 LinkedList底层原理 15.7.4 LinkedList集合特点，应用其设计栈、队列结构 队
浅谈DOM
zhou_yue999的博客
08-26 3251
DOM DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。 day01 1-入门 操作数据 --直接创建数据类型 如果我们要操作界面,就用DOM操作；系统(浏览器团队写的软件),它按照产业联盟的标准，把html文档解析成了一个对象:关键字 document document对象提供了很多属性和方法 供我们来操作界面 document这个单词是window对象的属性,那么window也是一种标准(约定标准,就是没有标准的意思):所有浏览器团
XSS DOM破坏实战案例
qq_63034068的博客
08-17 847
他这里会写进一个img后面是如果我们有头像就用我们的如果没有他就用默认的然后会走进defaultAvatar.avatar，如果我们能够走到window.defaultAvatar,就可能闭合我们的src，那么我们就得想如何创造它。用我们之前的payload会被编码导致失败,我们需要将1:"换成一个不存再的协议，否侧会被当作url地址栏会将它进行编码成%22导致我们无法进入到后面的语句，这里我换成的是cid。这种黑名单里面的函数和嵌套都会被过滤掉，如果是白名单里面的但属性不是里面的也会被过滤掉。
DOM03
Rouer_jia的博客
02-20 347
DOM03DOM03复习双标签内容计数器计数器升级计数器委托小计数组转HTML练习练习 - 升级练习练习 - 将数据显示在表格中购物车 - 1.7pm 108分 DOM03 复习 DOM: Document Object Model 文档对象模型 HTML文本代码 -> 转化成DOM -> 显示在浏览器上 浏览器展示的是DOM, 通过操作DOM 就可以实时修改浏览器的效果 查找元素: 固定元素读取 document.head document.body document.documentEl
Day23
03-31
了解如何操作数组（push、pop、map、filter等）和对象（属性访问、方法调用、原型链）对于处理复杂数据结构很有帮助。 5. **事件和DOM操作**：在Web开发中，JavaScript与用户交互的主要方式是通过事件监听和DOM...
Day26:Day26的任务
04-03
在Day26的任务中，你可能会被要求实现一个特定的功能，如动态添加和删除DOM元素，使用事件监听处理用户交互，或者利用fetch获取并处理远程数据。这样的练习有助于巩固理论知识，并提升实际开发技能。 总之，...
Day08
03-16
后续版本如ES2016+继续添加了更多的语言特性，如async/await、Set和Map数据结构、模板字符串等。 8. **JavaScript框架与库**: 如React、Vue、Angular等是流行的JavaScript前端框架，它们提供了一套完整的方式来构建...
DOM_day03
Funny_Chou的博客
10-10 270
DOM_day03
HTML5全面知识点
A_cot的博客
09-10 795
HTML（HyperText Markup Language）是构建网页的基础语言。版本历史：从 HTML 的早期版本发展到现在的 HTML5，功能不断增强，支持更多的多媒体和交互特性。定义：HTML 是一种用于描述网页结构的标记语言，通过各种标签来定义网页的内容和布局。
HTML5 `＜button＞` 标签深入全面解析
软考鸭
09-10 956
标签广泛应用于各种交互式网页中，如表单提交、模态框的打开和关闭、导航菜单的展开和收起等。通过结合使用CSS样式和JavaScript事件处理，可以创建出既美观又功能强大的按钮。标签是一个功能强大且灵活的元素，它提供了丰富的属性用于定义按钮的行为和外观，同时也支持CSS样式和JavaScript事件处理。标签的用法和特性，我们可以更好地利用它来创建出优秀的交互式网页。在这个简单的例子中，我们创建了一个普通的按钮，其上的文本是“点击我”。标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一。
HTML5中`＜ul＞`标签深入全面解析
软考鸭
09-10 685
更改项目符号的类型，如none（无符号）、disc（实心圆点）、circle（空心圆点）、square（实心方块）等。：使用自定义图像作为项目符号，增添个性色彩。：调整项目符号的位置，inside（内嵌）、outside（外置）任你选。通过对标签的深入剖析，我们不难发现其在网页设计中的重要地位。无论是基础的列表展示，还是复杂的导航菜单、产品展示等场景，标签都能凭借其灵活的布局和丰富的样式选项，满足我们多样化的需求。未来，随着HTML和CSS技术的不断发展，
HTML5概述
最新发布
探索软件工程的奥秘
09-14 148
HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。
HTML5中`＜img＞`标签深入解析
软考鸭
09-10 581
img>标签是一个空元素（即没有结束标签），用于在网页中显示图像。它通过src属性指定图像的URL，通过alt属性提供图像的替代文本，以便在图像无法加载时显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值