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 ...
随机推荐
- InitParam与ContextParm的异同
web.xml里面可以定义两种参数:(1)application范围内的参数,存放在servletcontext中,在web.xml中配置如下: xml 代码 <context-param> ...
- Google AdSense的CPC点击单价超百度联盟(2014)
很久没有关注AdSense了,一是访问不太方便,二是网站投放AdSense广告相当少,估计每天收入都不到1美元,所以就懒得去看了,一般都是几个月才去看一看. AdSense还行吗? AdSense点击 ...
- iso-开发基础知识-5-适配器
个人学习总结仅供参考:欢迎拍砖 1.适配器:用于连接两种不同种类的对象. 2.分为2种:类适配,对象适配. 3.委托(Delegate)模式属于对象适配器: 4.何时使用适配器模式 书中的这幅图更好的 ...
- [Docker]初次接触
Docker 初次接触 近期看了不少docker介绍性文章,也听了不少公开课,于是今天去官网逛了逛,发现了一个交互式的小教程于是决定跟着学习下. 仅仅是把认为重点的知识记录下来,不是非常系统的学习和笔 ...
- Flex和Servlet结合上传文件报错(二)
1.详细报错例如以下 一个表单域 不是一个表单域 java.io.FileNotFoundException: D:\MyEclipse\workspace\FlexFileUpload\Web\up ...
- tlplayer for ios V1.0
此程序UI修改于虎跃在线课堂.所以极其相似. 可以播放网络视频与本地视频,不知道怎么拷贝本地视频到Ipad或iphone上看的朋友,请自己到网上看教程. 支持mms,file,rtsp,rtmp,ht ...
- 一套手写ajax加一般处理程序的增删查改
倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...
- 一道试题引发的血案 int *ptr2=(int *)((int)a+1);
某日,看到一道比较恶心的C语言的试题,考了很多比较绕的知识点,嘴脸如下: int main(void) { int a[4] = {1, 2, 3, 4}; int *ptr1=(int *)(&am ...
- BZOJ 1221: [HNOI2001] 软件开发(最小费用最大流)
不知道为什么这么慢.... 费用流,拆点.... --------------------------------------------------------------------------- ...
- 清除缓存、开启IO统计
SQL性能优化前期准备-清除缓存.开启IO统计 如果需要进行SQl Server下的SQL性能优化,需要准备以下内容: 一.SQL查询分析器设置: 1.开启实际执行计划跟踪. 2.每次执行需优化SQL ...