匀速运动实例---分享到

最新推荐文章于 2020-06-30 20:24:06 发布
最新推荐文章于 2020-06-30 20:24:06 发布
阅读量143 收藏
点赞数
文章标签： javascript ViewUI

*****************分享到1**************************



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{margin:0;padding:0;}
        div{width:100px;height:400px;background:#404144;position: absolute;left:-100px;}
        span{width:20px;background: rosybrown;position:absolute;left:100px;top:150px;text-align: center;}
    </style>
    <script type="text/javascript">
        window.οnlοad=function()
        {
            var oDiv=document.getElementsByTagName("div")[0];
            oDiv.οnmοuseοver=function()
            {
                startMove(10,0);
            };
            oDiv.οnmοuseοut=function()
            {
                startMove(-10,-100);
            }
        };
        var timer=null;//必须全局
        function startMove(iSpeed,iTarget)
        {
            var oDiv=document.getElementsByTagName("div")[0];
            var Speed=iSpeed;
            clearInterval(timer);
                timer=setInterval(function(){
                    if(oDiv.offsetLeft==iTarget){clearInterval(timer);}
                    else{oDiv.style.left=oDiv.offsetLeft+Speed+"px";}


                },30)
        }
    </script>
</head>
<body>
<div>
    <span>分享到</span>
</div>
</body>
</html>


*****************分享到2**************************


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{margin:0;padding:0;}
        div{width:100px;height:400px;background:#404144;position: absolute;left:-100px;}
        span{width:20px;background: rosybrown;position:absolute;left:100px;top:150px;text-align: center;}
    </style>
    <script type="text/javascript">
        window.οnlοad=function()
        {
            var oDiv=document.getElementsByTagName("div")[0];
            oDiv.οnmοuseοver=function()
            {
                startMove(oDiv,10,0);
            };
            oDiv.οnmοuseοut=function()
            {
                startMove(oDiv,-10,-100);
            }
        };
        var timer=null;//必须全局
        function startMove(obj,iSpeed,iTarget)
        {
           // var oDiv=document.getElementsByTagName("div")[0];
            var Speed=iSpeed;
            clearInterval(timer);
                timer=setInterval(function(){
                    if(obj.offsetLeft==iTarget){clearInterval(timer);}
                    else{obj.style.left=obj.offsetLeft+Speed+"px";}


                },30)
        }
    </script>
</head>
<body>
<div>
    <span>分享到</span>
</div>
</body>
</html>






*******************分享到3***************************



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body{margin:0;padding:0;}
        div{width:100px;height:400px;background:#404144;position: absolute;left:-100px;}
        span{width:20px;background: rosybrown;position:absolute;left:100px;top:150px;text-align: center;}
    </style>
    <script type="text/javascript">
        window.οnlοad=function()
        {
            var oDiv=document.getElementsByTagName("div")[0];
            oDiv.οnmοuseοver=function()
            {
                startMove(oDiv,0);
            };
            oDiv.οnmοuseοut=function()
            {
                startMove(oDiv,-100);
            }
        };
        var timer=null;//必须全局
        function startMove(obj,iTarget)  //能用的情况下能少就少
        {
            //var oDiv=document.getElementsByTagName("div")[0];//已经通过參数传进来了全部无需再获取
            var Speed=0;
            if(obj.offsetLeft<iTarget){Speed=10}
            else{Speed=-10;}
            clearInterval(timer);
                timer=setInterval(function(){
                    if(obj.offsetLeft==iTarget){clearInterval(timer);}
                    else{obj.style.left=obj.offsetLeft+Speed+"px";}


                },30)
        }
    </script>
</head>
<body>
<div>
    <span>分享到</span>
</div>
</body>
</html>

weixin_33701617
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript匀速运动实现方法分析
01-19
本文实例讲述了javascript匀速运动实现方法。分享给大家供大家参考，具体如下： 匀速运动步骤： 1. 清除定时器 2. 开启定时器 3. 运动是否完成：a、运动完成，清除定时器；b、运动未完成继续 匀速运动停止条件：距离...
大物.zip大物课件-分享
05-03
1. 牛顿第一定律：惯性定律，指出物体保持匀速直线运动或静止的状态，除非外力迫使它改变状态。 2. 牛顿第二定律：力的作用效果与物体质量和加速度的乘积成正比，即F=ma。 3. 牛顿第三定律：作用力与反作用力，两个...
匀速运动的简单案例
GuoRongABC的博客
06-30 280
​​​​​​
匀速运动
lixiaoyan_star的博客
01-03 326
js匀速运动 &lt;style&gt; * { margin: 0; padding: 0; } .box { width: 100px; height: 100px; background-color: pink; ...
匀速运动案例
a63438840的博客
07-22 157
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=...
js指定步长实现单方向匀速运动
12-08
本文实例为大家分享了js实现单方向匀速运动的具体代码，供大家参考，具体内容如下 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document<...
EFR5020-MCACCE
03-28
1. 运动学基本概念：包括直线运动、曲线运动、匀速运动和变速运动等的基本定义和性质。 2. MATLAB编程基础：如变量声明、矩阵运算、控制结构（如循环和条件语句）、函数定义和调用等。 3. 数据分析：如何使用...
JS实现匀速与减速缓慢运动的动画效果封装示例
01-21
本文实例讲述了JS实现匀速与减速缓慢运动的动画效果。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title>www.jb51.net JS匀速/...
Unity iTween的匀速运动
SmillCool的博客
02-01 1943
iTween.MoveTo(gameobject, iTween.Hash("x", 0, "y", 0f, "z", -2000f, "time", 1f, "islocal", true, "EaseType", "linear")); 重点是EaseType 的模式 linear 表示线性运动
【转】iTween
無
08-26 779
什么是iTween? iTween是一个动画库，用它可以轻松实现各种动画、晃动、旋转、移动、褪色、上色、控制音频等iTween的使用从http://itween.pixelplacement.com/下载相应的插件(就一个cs文件)，然后导入到unity3d工程中可以干的事情控制音频：AudioFrom、AudioTo、AudioUpdate、Stab控制相机：CameraFadeAdd、Came
[游戏学习26] MFC 时间函数 画图形
weixin_34236869的博客
05-18 107
  &gt;_&lt;:这里第一次介绍MFC的时间函数，功能和Win32里的计时器类似。 &gt;_&lt;:这里还介绍了MFC的图形绘制函数，和Win32有一点区别 &gt;_&lt;:ABC.h 1 #define EX 1 //该点左鼠标 2 #define OH 2 //该点右鼠标 3 4 class CMyApp...
前端笔记91——简单的匀速运动以及匀速运动函数封装
裕博的博客
06-22 580
前言 在读书的时候，学物理的时候有提到匀速运动。Js代码也可以实现匀速运动，你信不信？下面就来一个简单的匀速运动的代码实例。 匀速运动实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="t...
Box2D C++ 匀速运动
破茧
08-21 1524
～～～～我的生活，我的点点滴滴！！ 地
tweenmax笔记
leiwen_su的博客
07-29 936
TweenMax动画库TweenMax扩展自TweenLite，添加了很多比较有用的特性，例如：repeat(),repeatDelay(),yoyo(),等等。TweenMax构造函数TweenMax ( target:Object, duration:Number, vars:Object );target : Object – 目标 MovieClip (或其它对象)，对它的属性进行缓动 d
关于iTween 插件的运动篇
a435931517的专栏
06-15 1622
最近项目中需要加入一些模型移动的小动画，学习过程中发现了iTween这个类库。它主要的功能就是处理模型从起始点到结束点之间运动的轨迹。（移动，旋 转，音频，路径，摄像机等）它是一个开源的项目并且完全免费，它们的官网在这里 http://itween.pixelplacement.com/index.php 打开网之后点击右上角Get iTween图标即可，或者在AssetStores商店中直接下载。
iTween基础之Move(移动)
weixin_33827590的博客
01-20 449
1,五种移动方法；2,函数的基础属性及用法 原文地址：http://blog.csdn.net/dingkun520wy/article/details/50476864 iTween官网：http://itween.pixelplacement.com/index.php 1,五种移动方法 MoveTo:从原始位置移动到目标位置。 MoveFrom:从目标位置移动到原始位置。 Mo...
van-progress匀速前进
最新发布
07-28
因此，"van-progress"可以解释为车辆以匀速前进的意思。 #### 引用[.reference_title] - *1* *2* *3* [四级词汇4000快速记忆](https://blog.csdn.net/s13166803785/article/details/128198542)[target="_blank" data...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值