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 ...
随机推荐
- Uva 1612 Guess
Thinking about it: 题目要求最后一名(也就是第N位)的分数要尽量的大,那么就一定要求第N-1名的分数也要尽量大.假如N-1可以取400和500,那么N-1应该取500,如果取400, ...
- spring 资源加载使用说明
Spring 提供了一个强大加载资源的机制,不但能够通过“classpath:”.“file:” 等资源地址前缀识别不同的资源类型,还支持Ant 风格带通配符的资源地址. 首先,我们来了解一下Spri ...
- UI基础:UILabel.UIFont
UILabel:标签 继承自UIView ,在UIView基础上扩充了显示文本的功能.(文本框) UILabel的使用步骤 1.创建控件 UILabel *aLabel=[[UILabel alloc ...
- 扩大或缩小undo表空间
***********************************************声明*************************************************** ...
- python把汉字转换成拼音实现程序
python把汉字转换成拼音实现程序 文章一个简洁干的汉字转拼音 程序,复制下载就可以直接使用,有需要的同学可以参考一下下. #coding:utf-8 #基于python2.6 table = 'a ...
- AsyncSocket的长连接使用
使用背景:需要跟服务器长期保持连接进行即时通讯:还有在跟智能硬件建立实时链接进行同步智能硬件的状态等,最近我就做项目就碰到需要实时更新智能硬件的状态(比如智能硬件的电量,以及其它工作状态),跟智能硬件 ...
- window.parent与window.opener的区别与使用
window.parent 是iframe页面调用父页面对象 举例: a.html 如果我们需要在b.html中要对a.html中的username文本框赋值(就如很多上传功能,上传功能页在ifrma ...
- BZOJ 2314: 士兵的放置( 树形dp )
树形dp... dp(x, 0)表示结点x不放士兵, 由父亲控制: dp(x, 1)表示结点x不放士兵, 由儿子控制: dp(x, 2)表示结点x放士兵. ---------------------- ...
- JBoss 系列二十一:JBossCache核心API
内容简介 本处介绍JBossCache相关的主要API,我们目的通过本部分描述,读者可以使用JBossCache API,在自己的应用中使用JBossCache. Cache接口 Cache 接口是和 ...
- 远程连接MySQL 不允许
报错:1130-host ... is not allowed to connect to this MySql server 1. 改表法. 可能是你的帐号不允许从远程登陆,只能在localhost ...