JS运动

最新推荐文章于 2023-10-09 13:26:23 发布
最新推荐文章于 2023-10-09 13:26:23 发布
阅读量209 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45044349/article/details/99697045

1.1匀速运动
可以设置div定位的top和left【正向，反向】
正向为例：

//匀速运动:点完button之后，div开始移动 ,div到达黑色线时，停止   s = vt 
<head>
 	div{
 		width:50px;
 		height:50px;
 		background:red;
 		position:absolute;
 		left:0px;
 		top:0px;
 	}
 	button{
 		margin-top:70px;
 	}
 	span{
 		position:absolute;
 		left:600px;
 		top:0px;
 		width:1px;
 		height:50px;
 		background:black;
 	}
</head>
<body>
	<div></div>
	<button id="btn">run</button>
	<span></span>

	<script>
		var oDiv = document.getElementsByTagName('div');
		var oBtn = document.getElementById('btn')
		//绑定事件
		 var timer = null;
         oBtn.onclick = function(){
      		startMove();
         }
         function startMove(){
         	 //30毫秒后执行  s = vt
            //清空之前触发事件的次数   每次点击运动时，速度一样
        	 clearInterval(timer);
       		 var iSpeed = 100-oDiv.offsetLeft > 0 ? 7 : -7;
             timer = setInterval(function(){
             	if(Math.abs(100 -oDiv.offsetLeft) < Math.abs(iSpeed)){
             		clearInterval(timer);
                    oDiv.style.left = '600px';
                }else{
      		          oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                     //oDiv.offsetLeft:获取div的left属性
               }      
             },30)
        }
	</script>
</body>

1.2.封装运动函数（匀速运动）

oBtn.onclick = function(){
//s = v t
	startMove(oDiv,300);
}

function startMove (dom ,target){
	clearInterval(timer);
	var iSpeed = target - dom.offsetLeft > 0 ? 7 :-7;
	timer = setInterval(function(){
		if (Math.abs(target - dom.offsetLeft) < (Math.abs(iSpeed)){
			clearInterval(timer);
			dom.style.left + target + 'px';
		}else{
			dom.style.left = dom.offsetLeft + iSpeed + 'px';
		}
	}，30)
}

2.缓冲运动

<head>
    <style>
            /* 正向 */
            div {
                width:50px;
                height:50px;
                background:red;
                position:absolute;
                left:0px;
                top:0px;
            }
            button{
                margin-top:70px;
            }
            span{
                position:absolute;
                left:600px;
                top:0px;
                width:1px;
                height:50px;
                background:black;
            }
    </style>
    
</head>
<body>
        <div></div>
        <span></span>
        <button id='btn'>run</button>
    <script>
       
        var oDiv = document.getElementsByTagName('div')[0];
        var oBtn = document.getElementById('btn');
        var timer = null;
        oBtn.onclick = function(){
            startMove(oDiv,600);
        }

         //物体的速度 距离目标点越近  就越小  当到达目标点时 速度减小为0
         function startMove(dom,target){
             clearInterval(timer);
             var iSpeed = null;
             timer = setInterval(function(){
                 iSpeed = (target - oDiv.offsetLeft) / 7;

                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                 if(oDiv.offsetLeft == target){
                     clearInterval(timer);
                 }else{
                     oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                 }
             },30);
         }
    </script>
</body>

3.demo
隐藏菜单

<head>
 <style>
        .wrapper{
            width:400px;
            height:80px;
            background:orange;
            position:absolute;
            left:-400px;
            top:200px;
        }
        span{
            width:50px;
            height:80px;
            background:red;
            position:absolute;
            right:-50px;
            top:0px;
        }
    </style>
</head>
<body>
    <!-- 隐藏菜单  冒泡事件 -->
    <div class="wrapper">
        <span></span>
    </div>

    <script>
        var timer = null;
        var oDiv = document.getElementsByClassName('wrapper')[0];
        oDiv.onmouseenter = function(){
            startMove(this,0);
        }
        oDiv.onmouseleave = function(){
            startMove(this,-400);
        }

        function startMove(dom,target){
             clearInterval(timer);
             var iSpeed = null;
             timer = setInterval(function(){
                 iSpeed = (target - oDiv.offsetLeft) / 7;

                 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                 if(oDiv.offsetLeft == target){
                     clearInterval(timer);
                 }else{
                     oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
                 }
             },30);
         }
		 //在网页中查看比较方便
         function getStyle (dom, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr];

            }else{
                return dom.currentStyle[attr];
            }
        }
    </script>
</body>

4. 透明度缓冲运动
//将透明度做成缓冲 只有 0 和 1【同时扩大一百倍】

<head>
	<style>
        div{
            width:100px;
            height:100px;
            background:red;
            opacity:1;
        }
    </style>
</head>
<body>
    <div id = 'demo'></div>
    <script>
        var timer = null;
        var oDiv = document.getElementById('demo');

        oDiv.onclick = function (){
            startMove(this,50);
        }
        function getStyle (dom, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr];

            }else{
                return dom.currentStyle[attr];
            }
        }
        //将透明度做成缓冲   只有 0 和 1【同时扩大一百倍】
        function startMove(dom,target){
            clearInterval(timer);
            var iSpeed = null, iCur = null;
            iCur = setInterval(function(){
                iCur = parseFloat( getStyle(dom,'opacity') ) * 100; 
                iSpeed = (target - iCur) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur == target){
                    clearInterval(timer);
                }else{
                   // [0,1]  区间的变化太小，以上扩大100倍 ，iCur * 100, iSpeed *100
                    dom.style.opacity = (iCur + iSpeed) / 100;
                }
            },30)
        }
    </script>
 </head>

5.多个物体间运动

<head>
    <style>
        div{
            width:100px;
            height:100px;
            background:red;
            opacity:1;
            margin-bottom:100px;
        }
    </style>
</head>
<body>
    <!-- 类数组 -->
    <div></div>
    <div></div> 
    <div></div>
    <div></div>
    <script>
        //定时器【同一个定时器会互相影响】【若不想影响，可以给每一个div都给一个定时器，在所有timer换成dom.timer】
        var timer = null;
        var oDivArray = document.getElementsByTagName('div');

        for (var i = 0;i < oDivArray.length; i ++){
            // 鼠标放上去时
            oDivArray[i] .onmouseenter = function (){
                startMove(this,400);
            }
            // 鼠标移出时
            oDivArray[i].onmouseleave = function(){
                startMove(this,100);
            }
        }
        // 利用for循环，给每一个div都绑定事件
    

        // oDiv.onclick = function(){
            // startMove(this,50);
        // }
        function getStyle (dom, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr];

            }else{
                return dom.currentStyle[attr];
            }
        }

        function startMove(dom, target){
            clearInterval(dom.timer);
            var iSpeed = null, iCur = null;
               //iCur为当前宽度值
            dom.timer = setInterval(function(){
                iCur = parseInt(getStyle(dom,'width') );
                //获得width，单位为px
                //parseInt 使字符串转化成整数     
                iSpeed = (target - iCur) / 7;
                // 当前速度是由当前宽度所决定的
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur == target){
                    clearInterval(dom.timer);
                    // 清零
                }else{
                    dom.style.width = iCur + iSpeed + 'px';
                }
            } , 30);
                
        }

    </script>
</body>

6.多物体的不同运动

<head>
	<style>
        div{
            width:50px;
            height:50px;
            opacity:1;
            margin-bottom:60px;
            background-color:blueviolet;
            border :5px solid burlywood;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        // 先清空定时器
        var timer = null;
        var oDivArray = document.getElementsByTagName('div');


        //绑定事件[从第一个div分别写其改变的方法]
        oDivArray[0].onclick = function (){
            startMove(this, 'height', 400);
        }
        oDivArray[1].onclick = function (){
            startMove(this, 'width', 400);
        }
        oDivArray[2].onclick = function (){
            startMove(this, 'opacity', 50);
        }
        oDivArray[3].onclick = function (){
            startMove(this, 'borderWidth', 40);
        }



        function getStyle (dom, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(dom,null)[attr];

            }else{
                return dom.currentStyle[attr];
            }
        }

        //写startMove的函数，使得方法可以引用
        // 可以将指定的属性传进来
        function startMove(dom,attr ,target){
            clearInterval(dom,timer);
            var iSpeed = null ,iCur = null;
            dom.timer = setInterval(function(){
                if(attr == 'opacity'){
                    iCur = parseFloat(getStyle(dom,attr) ) *100;
                }else{
                    iCur = parseInt(getStyle(dom,attr));
                }
                // target为目标点
                iSpeed = (target - iCur) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                if(iCur == target){
                    clearInterval(dom.timer);
                    // 清零
                }
                if (attr == 'opacity'){
                    dom.style.opacity = (iCur + iSpeed )/100;
                }else{
                    dom.style[attr] = iCur + iSpeed + 'px';
                }
            },30)
        }
	</script>
</body>

7.多物体多只运动+回调机制

<head>
	<style>
        div{
            position:absolute;
            left:0px;
            width:100px;
            height:100px;
            opacity:1;
            background-color:red;
        }
        #topDiv{
            top:200px;
        }
        #bottomDiv{
            top:400px
        }
    </style>
</head>
<body>
    <!--  同一个物体同时发生多个变化 -->
    <div id="topDiv"></div>
    <div id="bottomDiv"></div>


    <script>
    
    //width :100-->400   height:100-->400  left:0 -->200  top:200-->300  opacity :1-->0.5
    //最好的传入方式
    var oTopDiv = document.getElementById('topDiv');
        var oBottomDiv = document.getElementById('bottomDiv');
        oTopDiv.onclick = function () {
            startMove(this, {width: 400, height: 400, left: 200, top: 300, opacity: 50}, function () {
                startMove(oBottomDiv, {width: 400, height: 400, left: 200, top: 300, opacity: 50}, function () {
                    alert('over');
                })
            })
        }


    function getStyle(dom,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(dom,null)[attr];
        }else{
            return dom,currentStyle[attr];
        }
    }
    //callback调回机制
    function startMove (dom,attrObj,callback){
        clearInterval(dom.timer);
        var iSpeed = null, iCur = null;
        dom.timer = setInterval(function(){
            var bStop = true;
            for(var attr in attrObj){
                if(attr == 'opacity'){
                    iCur = parseFloat(getStyle(dom,attr)) *100;
                }else{
                    iCur = parseInt(getStyle(dom,attr));
                }
                // target为目标点
                iSpeed = (attrObj[attr] - iCur) / 7;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

                
                if (attr == 'opacity'){
                    dom.style.opacity = (iCur + iSpeed )/100;
                }else{
                    dom.style[attr] = iCur + iSpeed + 'px';
                }
                if(iCur != attrObj[attr]){
                    bStop = false;
                }
            }
            if(bStop){
                clearInterval(dom.timer);
                typeof callback == 'function'&& callback();
                // &&前的数为true时，才执行后面
            }
        },30)
    }
    </script>
</body>
JS完美运动框架详解——原理分析及demo
波克比的前端优快云博客
12-18 1万+
1.运动原理 Js运动，本质来说，就是让 web 上 DOM 元素动起来。而想要 DOM 动起来，改变其自身的位置属性，比如高宽，左边距，上边距，透明度等。还有一个很重要的前提是，运动的物体必须是绝对定位。 window.onload = function(){ var oBtn = document.getElementById('btn'); oBtn.oncl
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
10-15
以下是对标题和描述中提到的原生JavaScript运动函数封装的详细说明： 1. **匀速运动封装**： - `moveObj` 函数是用于封装匀速运动的基本实现。它接受6个参数：目标DOM对象、样式属性（如`top`、`left`等）、起始...
js运动框架
dianshanban9429的博客
03-13 205
参照网上写了一个运动框架 支持对象的width,height,left,top...，透明度动画效果 // 对一个对象的多个属性实现动画 function animate(obj,json,fun){ clearInterval(obj.timer); var fre = json['frequence'] || 10; //给对象添加添加一个...
Js运动
weixin_46399035的博客
02-24 523
*JavaScript之Js运动 在我们进行web开发的过程中，为了与用户进行更加友好、有趣的交互，拥有一套完美的运动框架就能轻松解决。 这次就给大家带来Javascript学习中Js运动的编写和注意事项。实现运动的思想很简单，首先对这个元素获取定位，然后通过改变该元素的left值和top值或者透明度，通过定时器就可以实现元素的运动效果。 Js运动代码编写的过程，基本步骤如下： 1、关闭上一...
JavaScript运动
happy_kx的博客
04-14 1053
在js中实现运动的原理： 在开启定时器setInterval()/setTimeout()和清楚定时器clearInterval()/clearTimeout()来控制运动，其中setInterval()方法可以让物体动起来,而clearInterval()方法可以让运动停止；在定时器过程中不断更改需要改变的值。 总结一下运动所需要用到的知识： 1.定时器（异步的 多次） let id = setInterval(function(){},毫秒值) clearInterval(id) 2.延时器
JS运动特效之完美运动框架实例分析
10-18
本篇文章将探讨“JS运动特效之完美运动框架实例分析”，着重讲解如何处理元素运动中的属性检测与判断，以确保所有设定的运动都能正确完成。 在JavaScript中，我们通常使用定时器（`setInterval`）来实现动画效果，...
JS运动特效之链式运动分析
11-28
总的来说，链式运动是JavaScript运动特效中的一个重要概念，它通过巧妙地组合和调用回调函数，实现了元素的连续动画效果。这种技术在网页交互设计中有着广泛的应用，能提升用户体验并增强页面的视觉吸引力。
js运动事件函数详解
10-21
JavaScript运动事件函数是编程中用于创建平滑动画和交互动效的关键技术之一。其核心在于通过改变DOM元素的样式属性（如位置、透明度、尺寸等）来产生动态效果。在本文中，我们将深入探讨JavaScript中实现运动事件...
js运动函数
hangnan315的博客
05-18 730
js运动函数（页面的运动…） js中的运动: 修改元素节点的属性值。 js中的动画：通过定时器，不断修改元素节点的属性值。 问题： 1.运动后不会停止 加条件判断，到达终点后，关闭定时器。 2.多次点击盒子后，盒子移动速度加快：定时器开启了多个。 解决办法：在开启定时器之前，先把上一次的定时器关闭。 案例 <style> #box { width: 200px; height: 200px; background-color:
JavaScript之运动（各种运动）
wangfei0225_的博客
01-26 1099
一、匀速运动 首先，我们的想法只是简单的向右匀速运动，运用到的是计时器方法。 <div id="oDiv"></div> <span id="oSpan"></span> <button id="btn">开始</button> <script> var oDiv = document.getElementById('oDiv'); var btn = do
javaScript之JS运动
qq_41972088的博客
12-15 332
1. 匀速运动 原理：从头到尾一直保持一个速度，即每次运动相同的距离，也称为平滑运动。 分析：①实现匀速运动效果，我们先设置元素样式，然后通过 document.getElementById(id)获取到对应的id节点元素。 ②关闭上一次定时器 ③定义speed速度（可以随意定义运动的速度值） ④设置运动和停止分开 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
JS运动----（4）
眷恋天空的驴
03-17 310
【ps】多物体运动框架现在比较的成熟，但是还是不够完善，等学完任意值的运动框架自然会明白。 4 任意值运动框架  1：记住：不要随意用offsetwidth一系列值。用currentStyle代替offset  2：计算机对小数的处理很弱的，要避免使用小数。对小数是模拟的  3：原有运动框架的问题-只能让某个值运动起来---如果想让其他值运动起来，要修改程序。  4：扩展的运动框架--运动属性
【JavaScript学习总结】【11】、JS 运动
最新发布
lily19970107的博客
10-09 186
　　动画效果在网站中是一种非常常见的交互式体验效果，比如侧边栏分享、图片淡入淡出，我们把这种动画效果就叫做运动，也就是让物体动起来。如果想让一个物体动起来，无非就是改变它的速度，也就是改变属性值，比如 left、right、width、height、opacity ，那么既然是运动，就可以分为很多种，如匀速运动、缓冲运动、多物体运动、任意值运动、链式运动和同时运动。我们从最简单的动画开始，如何让单个物体运动，逐步深入多物体运动、多动画同时运动到实现完美运动框架的封装，在这个过程中，每一个运动都封装为一个函数
js运动-同时运动
每天进步一点点
05-17 1919
接着上一篇 《js运动-链式运动》继续折腾   上一篇中我们的运动框架，可以完美的实现让一个物体先变宽，在变高，在变透明度.....,看似很完美了！ 貌似可以喝喝茶看看美女了。但是老板突然说，让你同时改变一个物体的宽高和透明度，心碎了一地！！！ 拿过之前的运动框架发现，无法实现让div同时又变宽，又变高，有变透明度！！最后无能为力，只好有请JSON大神出场了，不认识json
Js运动技术
yutin781528452的博客
08-18 492
运动基础 点击开始运动，让一个物体动起来： 改变方块的移动速度：1.可以改间隔时间，要注意的是可能会导致方块移动时一顿一顿的。 2.改变左边距offsetLeft的距离   这样写会让它无限制运动下去，想让它在某个地方停下： 但是当你多按几次开始运动的按钮后，等于是开了好几个定时器，那相当于30ms跑3*n px，所以我们在一开始先设一个关闭定时器：   运动框架 做...
JS运动总结
高贵的程序媛
08-05 455
跟着视频学习了JS的运动基础以及相关的应用，总结了以下一套运动框架，可以直接调用。（以下所有项目调用的move.js文件均为此函数） /** * 获取非行间样式, 兼容IE6--8 * @param styObj 属性对象 * @param name 属性名 * return string 样式值 */ function getStyle(styObj,nam...
js实现运动效果
domino~~的博客
08-19 769
js实现运动效果 在很多页面或者是app上我们都能看到物体运动这个效果，现在随着css3的出现在其动画效果与过渡效果中都可以去实现。但是在一些时候用自己封装的运动效果在性能上可能更加的好。那么接下来就用js来实现一个物体匀速运动，加速运...
JS 运动基础
女神修炼日记
11-27 315
JS动效基础知识
JavaScript运动课程资料与源码分享
根据给定的文件信息，可以了解到该文件包含了一份关于JavaScript运动效果实现的资料和相应的源代码，特别适合初学者进行学习。以下是从标题、描述、标签及文件名称列表中提炼出的知识点，它们对于理解JavaScript运动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

outside-R

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值