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. SPOJ 1812 Longest Common Substring II(后缀自动机)

    [题目链接] http://www.spoj.com/problems/LCS2/ [题目大意] 求n个串的最长公共子串 [题解] 对一个串建立后缀自动机,剩余的串在上面跑,保存匹配每个状态的最小值, ...

  2. POJ3771+Prim

    最小生成树的应用 数据量小. /* Prim */ #include<stdio.h> #include<string.h> #include<stdlib.h> ...

  3. 让你提前知道软件开发(24):C语言和主要特征的发展史

    文章1部分 再了解C语言 C语言的发展历史和主要特点 作为一门众所周知的计算机编程语言,C语言是谁发明的呢?它是怎样演进的?它有何特点?究竟有多少人在使用它? 1. C语言之父 C语言是1972年由美 ...

  4. 关于typedef之四种用途 和 两个陷进

    typedef用来声明一个别名,typedef后面的语法,是一个声明.本来笔者以为这里不会产生什么误解的,但结果却出乎意料,产生误解的人 不在少数.罪魁祸首又是那些害人的教材.在这些教材中介绍type ...

  5. //相当于深拷贝一份dataArray。这样才不会改变dataArray本身的值

    //相当于深拷贝一份dataArray.这样才不会改变dataArray本身的值 NSMutableArray* commitDataArray = [NSKeyedUnarchiver unarch ...

  6. java代理课程测试 spring AOP代理简单测试

    jjava加强课程测试代码 反射. 代理 .泛型.beanUtils等 项目源码下载:http://download.csdn.net/detail/liangrui1988/6568169 热身运动 ...

  7. java 无法割符日期字符串转yyyy-MM-dd hh:mm:ss

    1.需要转换字符串(20150210125942),转化后要达到的目的:2015-02-10 12:59:42 public static void main(String[] args) { Str ...

  8. windows文件快速搜索软件推荐

    everything文件搜索工具,可以快速搜索windows下的文件

  9. JS 引用

    var arr1=[1,2,3,4]; var arr2=arr1; arr2.push(5); console.log(arr1);//和arr2一样 console.log(arr1==arr2) ...

  10. MVC-06 安装部署

    部署网站往往是一件麻烦事,因为在安装部署的过程中,经常有许多步骤要运行,对于许多不太熟悉IIS/SQL的新手来说,部署网站编程一件非常困难且危险的事.Visual Studio 2012在ASP.NE ...