function moveElement(elementId, final_x, final_y,interval) {
            if (!document.getElementById) return false;
            if (!document.getElementById(elementId)) return false;
            var elem = document.getElementById(elementId);
            var elementLeft = parseInt(elem.style.left);
            var elementTop = parseInt(elem.style.top);
            if (elementLeft == final_x && elementTop == final_y) {
                return true;
            }
            if (elementLeft < final_x) {
                elementLeft++;
            }
            if (elementLeft > final_x) {
                elementLeft--;
            }
            if (elementTop < final_y) {
                elementTop++ ;
            }
            if (elementTop > final_y) {
                elementTop--;
            }
            elem.style.left = elementLeft + 'px';
            elem.style.top = elementTop + 'px';
            var repeat = "moveElement('"+ elementId + "'," + final_x + "," + final_y + "," + interval + ")";
            movement = setTimeout(repeat, interval);
        }

   function positionMsg() {
            var elem = document.getElementById('message');
            elem.style.position = 'absolute';
            elem.style.left = '10px';
            elem.style.top = '100px';
            moveElement('message',200,500,100);
        };

JS 移动动画的更多相关文章

  1. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  2. js双层动画幻灯

    js双层动画幻灯 点击下载

  3. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

  4. 好用的jquery.animateNumber.js数字动画插件

    在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...

  5. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  6. css3动画和JS+DOM动画和JS+canvas动画比较

    css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...

  7. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  8. JS实现动画的四条优化方法

    JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...

  9. vue three.js 结合tween.js 实现动画过渡

    参考地址:https://www.jianshu.com/p/d6e3b4b153bb https://www.jqhtml.com/10513.html 官方文档:https://github.co ...

  10. js抛物线动画——加入购物车动效

    参考文章:http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-元素-抛物线-运动-动画/ parapola.js /*! * by zh ...

随机推荐

  1. HDU 2588 GCD

    题目大意:给定N,M, 求1<=X<=N 且gcd(X,N)>=M的个数. 题解:首先,我们求出数字N的约数,保存在约数表中,然后,对于大于等于M的约数p[i],求出Euler(n/ ...

  2. CopyU!新插件 CopyPC2U正式发布!

    CopyPC2U双向拷贝插件今天正式上线!该插件需要CopyU!较新版本的支持,可以帮助将文件从电脑自动的复制到移动设备上. 下载地址:http://kuai.xunlei.com/d/BiIvAED ...

  3. android 视频播放器的INTENT-FILTER属性

    <intent-filter>                   <action android:name="android.intent.action.VIEW&quo ...

  4. nbtstat 查询IP地址对应的计算机名称

    使用命令nbtstat -a ipaddress即可,例如:nbtstat -a 192.168.1.2.

  5. Web Service 入门例子

    在网上很常见的一个列子,实现计算器,看完总得自己练练,不然一段时间不接触又忘了 新建一个空网页,因为.net framework 4.0 不能直接建web 服务,只能在项目中添加 然后在项目中添加We ...

  6. Lucence.Net+添加关键词+分页+排序

    1.使用queryparser完成解析搜索请求 2.基本格式如: QueryParser parser=new QueryParser("字段名称","分析器实例&quo ...

  7. Windows下的PHP开发环境搭建——PHP线程安全与非线程安全、Apache版本选择,及详解五种运行模式。

    今天为在Windows下建立PHP开发环境,在考虑下载何种PHP版本时,遭遇一些让我困惑的情况,为了解决这些困惑,不出意料地牵扯出更多让我困惑的问题. 为了将这些困惑一网打尽,我花了一下午加一晚上的时 ...

  8. 创建txt格式文本日志

    公共方法(可以将其放到类库里边): #region 记录日志 #region 写日志 /// <summary> /// 写日志 /// </summary> /// < ...

  9. 帝国cms让当前栏目显示不同样式(图文)

    在使用帝国cms制作栏目导航条时,我们可能会需要根据当前栏目,使当前栏目样式不同. 如图: 此类导航,源代码一般为 <li>全站首页</li> <li class=&qu ...

  10. Windows下Python中的中文路径和中文输出问题

    这几天有个项目需要写一点类似于脚本的小程序,就用Python写了,涉及到中文路径和中文输出的问题,整理一下. 有一个问题我觉得需要先强调一下,在写Python程序的时候,一定保证编码是utf-8,然后 ...