JS 移动动画
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 移动动画的更多相关文章
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js双层动画幻灯
js双层动画幻灯 点击下载
- js运动动画
原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
- 好用的jquery.animateNumber.js数字动画插件
在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
- 使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
- JS实现动画的四条优化方法
JS实现动画的四条优化方法 1)如果使用的是setTimeout实现的轮询动画,在每一次执行方法之前需要把前面的设置的定时器清除掉 2)为了防止全局变量的污染,我们把定时器的返回值赋值给当前操作元素的 ...
- vue three.js 结合tween.js 实现动画过渡
参考地址:https://www.jianshu.com/p/d6e3b4b153bb https://www.jqhtml.com/10513.html 官方文档:https://github.co ...
- js抛物线动画——加入购物车动效
参考文章:http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-元素-抛物线-运动-动画/ parapola.js /*! * by zh ...
随机推荐
- 蓝桥杯之FBI树问题
问题描述 我们可以把由"0"和"1"组成的字符串分为三类:全"0"串称为B串,全"1"串称为I串,既含"0&q ...
- python import 自己的包
在写python时,有时候写的一个python文件可能需要被其他python文件所用,那么可以用导入包 import 的 方式: 1.自己写的包放到哪里? >>> import sy ...
- UVA - 699The Falling Leaves(递归先序二叉树)
The Falling Leaves Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu Sub ...
- hive原生和复合类型的数据载入和使用
原生类型 原生类型包含TINYINT,SMALLINT,INT,BIGINT,BOOLEAN,FLOAT,DOUBLE,STRING,BINARY (Hive 0.8.0以上才可用),TIMESTAM ...
- iOS app 集成友盟推送问题
之前做app推送主要是集成友盟SDK,在程序获取deviceToken时,老是提示如下错误: Error Domain=NSCocoaErrorDomain Code=3000 "未找到应用 ...
- CSS learnning...
"Whenever this property changes, apply that change slowly." The property transition: width ...
- BZOJ 1044: [HAOI2008]木棍分割(二分答案 + dp)
第一问可以二分答案,然后贪心来判断. 第二问dp, dp[i][j] = sigma(dp[k][j - 1]) (1 <= k <i, sum[i] - sum[k] <= ans ...
- HDU1257-最少拦截系统
描述: 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的高度.某天,雷达捕捉到敌国的导弹来 ...
- 原生js实现的轮播图,易用+可多用
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- python自学笔记(七)排序与多级排序
一.sorted内置方法 a = [1,2,3,4] 从大到小(翻转) a = sorted(a,reverse = True) #生成新对象,不会原地修改,需要重新赋值 print a --> ...