js高级之实现匀速运动

最新推荐文章于 2024-03-06 17:11:58 发布
最新推荐文章于 2024-03-06 17:11:58 发布
阅读量233 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 匀速运动 js动画 JS高级
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43738731/article/details/84574971
版权

使用计时器写了一个简单的匀速运动。鼠标经过，匀速运动开始

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Js动画-匀速</title>
    <link rel="stylesheet" href="">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position:relative;
            width:150px;
            height:150px;
            background-color: green;
            top:300px;
            left:-150px;
        }
        .box span{
            position:absolute;
            right:-20px;
            display:block;
            width:20px;
            background-color: red;
            top:50%;
            -webkit-transform: translateY(-50%);
               -moz-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                 -o-transform: translateY(-50%);
                    transform: translateY(-50%);
        }

    </style>
</head>
<body>
    <div class="box">
        <span>匀速</span>
    </div>

    <script>
    window.onload=function(){
        var box=document.getElementsByClassName("box")[0];
        box.onmouseover=function(){
            startMove(box,0);
        }
        box.onmouseout=function(){
            startMove(box,-150);
        }
    }
    var timer=null;
    function startMove(obj,target){
        var speed=0;
        clearInterval(timer);
        timer=setInterval(function(){

            if(obj.offsetLeft<target){
                speed=10;
            }else{
                speed=-10;
            }
            if(obj.offsetLeft==target){
                clearInterval(timer);
            }else{
                obj.style.left=obj.offsetLeft+speed+"px";
            }

        },30);
    }
    </script>
</body>
</html>
404BAI
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css动画属性详解
weixin_68658847的博客
02-03 2722
css动画属性详解
动画函数（匀速与变速）
yyy_wj的博客
07-31 683
1、匀速动画函数 案例：移动元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding:...
用animation做无缝匀速滚动
行如逆水行舟，不进则退
04-02 3870
用animation做无缝匀速滚动原理应用 原理 最外层需要一个可视大小的盒子（黑色部分）。记得给这个盒子添加高度（高度和蓝粉色盒子一样） 在可视的盒子里需要放一个盒子，该盒子的宽度就是粉色蓝色盒子宽度的总和，其实也就是你需要动画部分宽度的两倍。然后需要给这个box一个相对定位 position: relative 粉色和蓝色盒子里放的是一样的东西，通过这样来达到视觉上无缝的效果。需要给这两个盒子加绝对定位 position: absolute 。我们就是通过改变它们lefft right 值来实现滚动
Animation 实现匀速旋转
sinat_39348382的博客
01-15 487
Unity 动画
使用animation实现匀速无缝循环滚动动画，鼠标悬停停止运动
qq_37607451的博客
10-20 6503
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝轮播</title> <!-- 运动 --> <!-- voison：0.1 1 2 3 4 5 6 1 1走到6再到1，这时如果没有1这张图就有一...
贝塞尔曲线高阶匀速运动算法 HTML5/JS 实现
12-06
在HTML5和JavaScript中，我们可以利用贝塞尔曲线来实现对象的平滑移动，即所谓的“匀速运动算法”。 贝塞尔曲线的基本概念： 1. **控制点**：贝塞尔曲线由一个起点、一个终点以及若干个控制点定义，这些控制点决定...
Three.js实现的3D版本摆线运动动画场景效果源码.zip
11-01
《Three.js实现3D摆线运动动画场景效果详解》 Three.js是一款基于WebGL的JavaScript库，用于在浏览器中创建3D图形。本项目“Three.js实现的3D版本摆线运动动画场景效果源码”提供了实现3D摆线运动动画的完整代码，...
html模拟圆周运动1s
06-22
`animation`属性指定了动画的名称、时长、速度曲线（linear表示匀速运动）以及是否无限循环。 最后，JavaScript（JavaScript Object Notation）用于增加交互性和动态行为。在这个例子中，虽然基本的圆周运动已经...
javascript_animation:在 javascript 中尝试动画
07-04
在JavaScript中创建动画是一项基础但重要的技能...以上就是JavaScript动画的主要知识点，从基础原理到高级应用，涵盖了动画开发的各个方面。通过不断实践和学习，你将能够创建出各种令人印象深刻的JavaScript动画效果。
JS动画效果源代码（含注释）
03-06
"JS动画效果源代码（含注释）"这个资源包含了实现各种JavaScript动画效果的源码，这些代码经过了详细的注释，方便初学者理解和学习。 在JavaScript中，动画效果主要通过操作DOM（Document Object Model）元素的样式...
JavaScript-如何通过原生JS实现匀速动画
汪汪汪汪
03-04 434
前面可以看到，我们使用current++是一种匀速的方式，匀速的快慢取决于我们+=后面的值，如果我们希望是缓动动画的形式去移动我们的元素，我们可以通过以下封装算法去实现。据我们所知，我们可以通过css3（transform translate即可）区实现这个动画，但是通常面试的时候，可能会被要求原生手敲；​ 使用到的知识点：定时器去实现setInterval去实现。
js运动技术--匀速运动
持之以恒
07-10 355
#div1 {height: 200px;width: 200px;background: red;top: 50px;left: 0px;position: absolute;} window.onclick = function(){ var oBtn = document.getElementById("btn1"); var oDiv = document
匀速动画VS缓动动画（超详细）
qq_45473786的博客
03-19 744
文章目录匀速动画匀速动画案例描述匀速动画案例图示HTML+CSS匀速动画JS代码匀速动画JS代码改进----函数封装缓动动画缓动动画案例描述缓动动画案例图示HTML+CSS缓动动画JS代码缓动动画JS代码改进----函数封装 匀速动画 匀速动画案例描述 在浏览器中，某一个盒子以一定不变的速度向右移动直到停止 匀速动画案例图示 HTML+CSS <style> #box { ...
animation基础学习与实现简单loading圆环
最新发布
qq_41437448的博客
03-06 768
animation：是以下八个属性的集合1.animation-name（绑定的动画名称，可以绑多个，多个名称之间用逗号分隔）2.animation-direction（播放动画的方向：正/反）animation-duration：normal //正向播放；animation-duration：reverse /反向播放；animation-duration：alternate //按照播放次数，奇正偶反；
用 Animation 实现匀速旋转
热门推荐
纸箱猪的专栏
04-12 1万+
年初参加 GGJ 的时候，我曾想偷懒用 Animation 实现物体的匀速旋转。思路很简单，只需要0度和360（或-360）度两个关键帧，然后将动画设为循环播放。当时以为这样事情就成了。谁知做出来的效果是下面这样，物体转完一圈后会停一下：我知道问题就在动画曲线上：只要把曲线弄成一条直线就行。但是当时折腾了一会儿也没调出一条漂亮的直线，因此还是改用代码来实现匀速旋转。今天发现其实根本不用手调，只要右...
jQuery实现消息匀速移动显示
qq_36584352的博客
09-04 650
原理：不停地调用定时器，达到在很短的时间（最小执行时间 OSX:10ms,Windows:15ms）移动很短的距离（1px），即视觉上是匀速移动 效果：消息从右往左匀速移动 html（消息内容从后台接口获取然后添加到&lt;ul&gt;&lt;/ul&gt;中）  &lt;div class="notify" id="js-notify"&gt; &lt;div class="...
js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
imherer的博客
08-20 406
主要实现以下几种简单的动画效果（其实原理基本相同）： 1.匀速动画：物体的速度固定 2.缓动动画：物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现： 1.匀速动画（以物体左右匀速运动为例） 动画效果主要是用定时器setInterval()来实现的，每隔几毫秒让物体移动一点距离，通过不断调用定时器来达到让物体运动的效果。 将定时器放在一个函数内，定义物体的运动速度speed为10，判断物体的运动方向（向左走或向右走）来规定speed的正负； 然后将 物体的offsetLeft加上速度spe...
javascript中的匀速运动（两种方式）
weixin_30273931的博客
01-29 134
javascript中的匀速运动 不要小看这个东西呀，机关重重呀 html: <input type="button" value="start" onclick="show()"/> <div id="move"> </div> css: #move{ height:100px; width:100p...
前端开发JS--匀速运动
m0_51937621的博客
01-10 1250
准备工作 1、有一个用户可视的物体 2、点击一个按钮，触发运动 在这里插入代码片 一、匀速运动 //运动就是改变物体像素 //有了一个div,js要控制，首先要获取,元素然后在进行控制。 //点击btn，物体快发生运动。 var oDiv=document.getElementsByTagName(“div”)[0]; var oBtn=document.getElementById(‘btn’); oBtn.οnclick=function(){ //s=vt; var iSpeed=4;//以每30m
easyx实现随机匀速运动
05-19
实现随机匀速运动可以通过以下步骤： 1. 定义物体的初始位置和速度向量。 2. 在游戏循环中，根据速度向量更新物体的位置。 3. 当物体到达屏幕边缘时，改变速度向量的方向。 4. 在每次更新位置时，增加一个随机数来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值