一、让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基础之动画(一)的更多相关文章

  1. GSAP JS基础教程--动画的控制及事件

    好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...

  2. js基础之动画(三)

    一.链式运动 首先,要改进运动框架 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; ...

  3. js基础之动画(二)

    一.多物体同时运动 栗子一:多个Div,鼠标移入变高,动态下拉菜单 function startMove(obj,iTarget){  clearInterval(obj.timer); obj.ti ...

  4. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  5. js基础查漏补缺(更新)

    js基础查漏补缺: 1. NaN != NaN: 复制数组可以用slice: 数组的sort.reverse等方法都会改变自身: Map是一组键值对的结构,Set是key的集合: Array.Map. ...

  6. day51 JS基础

    复习 1.字体图标 用i标签, 设置类名, 与第三方字体图标库进行图标匹配 <link rel="stylesheet" href="font-awesome-4. ...

  7. 10慕课网《进击Node.js基础(一)》初识promise

    首先用最简单的方式实现一个动画效果 <!doctype> <html> <head> <title>Promise animation</titl ...

  8. SVG.js 基础图形绘制整理(二)

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

  9. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

随机推荐

  1. jdk和eclipse位数不一致出错

    32位的eclipse无法打开:找不64位jdk6的jvm.dll文件(64位的没有这个文件).网上说法可以通过设置eclipse初始化文件xxx.ini改变方式: 直接换成了同位数的了,没去试了.

  2. 触发器创建及Navicat中使用

    mysql中的触发器(trigger)使用 Trigger: 示例: mysql,)); Query OK, rows affected (0.03 sec) mysql> CREATE TRI ...

  3. [转载] tmux的使用tips

    原文: http://tangosource.com/blog/a-tmux-crash-course-tips-and-tweaks/

  4. 转:Teach Yourself Programming in Ten Years——用十年教会自己编程

    转自:http://blog.csdn.net/UndeadWraith/article/details/6140455 作者:Peter Norvig 译者:刘海粟 本文原文为:http://nor ...

  5. Hibernate中的Configuration类

    Configuration类用来管理我们的配置文件的信息的,通过它,我们可以通过创建一个configuration实例来管理相应的配置文档,但是通常我们只创建一个configuration实例. 下面 ...

  6. Intent 隐式跳转,向下一个活动传递数据,向上一个活动返回数据。

    一.每个Intent只能指定一个action,多个Category. 使用隐式跳转,我们不仅可以跳转到自己程序内的活动,还可以启动其他程序的活动.使得Android多个程序之间的功能共享成为可能. 例 ...

  7. stdlib标准库的常用API

    iOS 有如下四种随机数方法,下面以产生 [0,100) 的随机数为例: 1. srand((unsigned)time(0));  //不加这句每次产生的随机数不变 int i = rand() % ...

  8. iOS开发 差间距滚动

    CGFloat fView_Height(UIView *aView) { return aView.frame.size.height; } CGFloat fView_Width(UIView * ...

  9. mixamo fuse三维角色制作

    软件下载: http://www.cgtsj.com/cg/yj/1302/index.html 资源名称: Mixamo Fuse三维角色制作软件V1.3版 本站编号:  YJ1302 百度网盘:下 ...

  10. Nginx内置常用变量

    nginx用到的全局变量 $arg_PARAMETER #这个变量包含GET请求中,如果有变量PARAMETER时的值. $args #这个变量等于请求行中(GET请求)的参数,例如foo=123&a ...