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. SVD神秘值分解

    SVD分解 SVD分解是LSA的数学基础,本文是我的LSA学习笔记的一部分,之所以单独拿出来,是由于SVD能够说是LSA的基础,要理解LSA必须了解SVD,因此将LSA笔记的SVD一节单独作为一篇文章 ...

  2. 使用Html5的DeviceOrientation特性实现摇一摇功能

    如今非常多的手机站点上也有类似于微信一样的摇一摇功能了,比方什么摇一摇领取红包,领取礼品等等 1,deviceOrientation:封装了方向传感器数据的事件,能够获取手机静态状态下的方向数据,如手 ...

  3. os基础

    命令:指计算机用户要求计算机系统为其工作的指示: 命令的表示形式: 1.字符形式: 2.菜单形式: 3.图形形式: 命令的使用方式:1. 脱机使用方式 off_line       2.联机使用方式  ...

  4. EF的泛型封装 写的很好 转自Fly_Elephant http://www.cnblogs.com/xiaofeixiang/p/4188600.html?utm_source=tuicool

    Entity Framework本身的增删改查其实 已经很方便了,不过做项目的时候用的多了也就觉得有点累了,每个业务实体基本上都涉及到到了增删改查这四个基本的要素,至于封装每个公司可能都不一样,接口, ...

  5. asp.net 连接access数据库方法

    在 Web.Config 中配置 Access 数据库驱动和数据库文件名称. 请看代码 <appSettings> <add key="DBDriver" val ...

  6. Android应用开发提高篇(6)-----FaceDetector(人脸检测)

    链接地址:http://www.cnblogs.com/lknlfy/archive/2012/03/10/2388776.html 一.概述 初次看到FaceDetector这个类时,心里想:And ...

  7. BZOJ 1218: [HNOI2003]激光炸弹( 前缀和 + 枚举 )

    虽然source写着dp , 而且很明显dp可以搞...但是数据不大 , 前缀和 + 枚举也水的过去..... -------------------------------------------- ...

  8. Git使用记录(二)

    一)git init 初始化仓库 要使用Git进行版本管理,必须先初始化仓库,请先建立一个目录并初始化仓库 mkdir gittest cd gittest git init 初始化成功以后会在当前目 ...

  9. Python学习笔记 (3) :列表、元组的操作

    列表,即写在方括号之间.用逗号分隔开的数值列表.列表内的项目不必全是相同的类型. >>> a = ['spam', 'eggs', 100, 1234] >>> a ...

  10. [LeetCode]题解(python):075-Sort Colors

    题目来源: https://leetcode.com/problems/sort-colors/ 题意分析: 给定n个颜色,红色,白色和蓝色.分别用0,1,2代替,将这些颜色排序,0在1前,1在2前. ...