js基础之动画(一)
一、让div动起来
var oBtn = document.getElementById('btn1');
var timer='';//设置定时器
oBtn.onclick=function startMove(){
var oDiv = document.getElementById('div1');
clearInterval(timer);//关闭原有的定时器,否则多个定时器会叠加
timer=setInterval(function(){
var iSpeed=3;
if(oDiv.offsetLeft>=208){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}
},30);
}
二、‘分享到’侧边栏
var timer=null;
function startMove(iTarget,iSpeed){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}
},30);
}
window.onload=function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(0,10);
}
oDiv.onmouseout=function(){
startMove(-100,-10);
}
}
三、图片淡入淡出效果
var timer=null;
var alpha=30;
function startMove(iTarget,iSpeed){
var oImg = document.getElementById('img1');
clearInterval(timer);
timer=setInterval(function(){
if(alpha==iTarget){
clearInterval(timer);
}else{
alpha+=iSpeed;document.title=alpha;
oImg.style.filter='alpha(opacity:'+alpha+')';
oImg.style.opacity=alpha/100;
}
},30);
}
window.onload=function(){
var oImg = document.getElementById('img1');
oImg.onmouseover=function(){
startMove(100,5);
}
oImg.onmouseout=function(){
startMove(10,-5);
}
四、实现缓动效果
var oBtn = document.getElementById('btn1');
var timer='';
oBtn.onclick=function startMove(iTarget){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var iSpeed=(300-oDiv.offsetLeft)/8;//缓动效果
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);//消除小数点值的bug
document.title=iSpeed+'/'+oDiv.offsetLeft;
if(oDiv.offsetLeft==300){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';
}
},30);
}
五、缓动侧边栏
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var iSpeed=(iTarget-oDiv.offsetTop)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(oDiv.offsetTop==iTarget){
clearInterval(timer);
}else{
oDiv.style.top=oDiv.offsetTop+iSpeed+'px';
}
},30);
}
window.onscroll=function(){
var oDiv = document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
startMove(parseInt(t));//消除抖动
}
六、匀速运动停止条件:与目标点无限接近即可
timer=setInterval(function(){
var iSpeed=0;
if(oDiv.offsetLeft<iTarget){
iSpeed=7
}else{
iSpeed=-7
}
if(Math.abs(oDiv.offsetLeft-iTarget)<7){//是否到达终点
clearInterval(timer);
oDiv.style.top=iTarget+'px';
}else{
oDiv.style.top=oDiv.offsetLeft+iSpeed+'px';
}
},30);
js基础之动画(一)的更多相关文章
- GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...
- js基础之动画(三)
一.链式运动 首先,要改进运动框架 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; ...
- js基础之动画(二)
一.多物体同时运动 栗子一:多个Div,鼠标移入变高,动态下拉菜单 function startMove(obj,iTarget){ clearInterval(obj.timer); obj.ti ...
- Web3D编程入门总结——WebGL与Three.js基础介绍
/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...
- js基础查漏补缺(更新)
js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...
- day51 JS基础
复习 1.字体图标 用i标签, 设置类名, 与第三方字体图标库进行图标匹配 <link rel="stylesheet" href="font-awesome-4. ...
- 10慕课网《进击Node.js基础(一)》初识promise
首先用最简单的方式实现一个动画效果 <!doctype> <html> <head> <title>Promise animation</titl ...
- SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
- GSAP JS基础教程--TweenLite操作元素的相关属性
今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了. 代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...
随机推荐
- jdk和eclipse位数不一致出错
32位的eclipse无法打开:找不64位jdk6的jvm.dll文件(64位的没有这个文件).网上说法可以通过设置eclipse初始化文件xxx.ini改变方式: 直接换成了同位数的了,没去试了.
- 触发器创建及Navicat中使用
mysql中的触发器(trigger)使用 Trigger: 示例: mysql,)); Query OK, rows affected (0.03 sec) mysql> CREATE TRI ...
- [转载] tmux的使用tips
原文: http://tangosource.com/blog/a-tmux-crash-course-tips-and-tweaks/
- 转:Teach Yourself Programming in Ten Years——用十年教会自己编程
转自:http://blog.csdn.net/UndeadWraith/article/details/6140455 作者:Peter Norvig 译者:刘海粟 本文原文为:http://nor ...
- Hibernate中的Configuration类
Configuration类用来管理我们的配置文件的信息的,通过它,我们可以通过创建一个configuration实例来管理相应的配置文档,但是通常我们只创建一个configuration实例. 下面 ...
- Intent 隐式跳转,向下一个活动传递数据,向上一个活动返回数据。
一.每个Intent只能指定一个action,多个Category. 使用隐式跳转,我们不仅可以跳转到自己程序内的活动,还可以启动其他程序的活动.使得Android多个程序之间的功能共享成为可能. 例 ...
- stdlib标准库的常用API
iOS 有如下四种随机数方法,下面以产生 [0,100) 的随机数为例: 1. srand((unsigned)time(0)); //不加这句每次产生的随机数不变 int i = rand() % ...
- iOS开发 差间距滚动
CGFloat fView_Height(UIView *aView) { return aView.frame.size.height; } CGFloat fView_Width(UIView * ...
- mixamo fuse三维角色制作
软件下载: http://www.cgtsj.com/cg/yj/1302/index.html 资源名称: Mixamo Fuse三维角色制作软件V1.3版 本站编号: YJ1302 百度网盘:下 ...
- Nginx内置常用变量
nginx用到的全局变量 $arg_PARAMETER #这个变量包含GET请求中,如果有变量PARAMETER时的值. $args #这个变量等于请求行中(GET请求)的参数,例如foo=123&a ...