美文网首页
JS的特效:动画篇

JS的特效:动画篇

作者: flow__啊 | 来源:发表于2015-11-21 18:51 被阅读84次
  1. 动画的基础是个什么?没错,就是位置的移动。
    这里移动的实现:
//v就是view,你要改变的控件位置v.style.top=100+'px';
v.style.left=100+'px';
//得到位置是一个问题,我这里提供一种获得相对于父元素位置的方法。
var now=v.offsetTop;
var now2=v.offsetLeft;
  1. 那么问题来了,如果是一个动画呢?那就要连续的移动,怎么做到连续的移动,用定位功能。我找到两个定时的接口。
1 timer
  //第一个参数是执行的function,第二个是间隔的时间
  var timer=setTimeout("Refresh()",1000); 
  //取消定时器
  clearTimeout(timer);

2 setInterval
  //第一个参数是执行的function,第二个是间隔的时间
   MyInterval=setInterval("Refresh()",1000);
  //取消定时器
  clearInterval(MyInterval);
  //你觉得一样是吧?我也觉得
  //太坑了,因为JS是单线程,所以clearinterval放在for里,是会出问题的。
  1. 做完几个练习,我准备转CSS3动画了,因为
hehe

此文完结。。。。

相关文章

  • JS的特效:动画篇

    动画的基础是个什么?没错,就是位置的移动。这里移动的实现: 那么问题来了,如果是一个动画呢?那就要连续的移动,怎么...

  • 2.14号

    总结:单词完成 js特效复习 开始看js动画 网课看了8节 计划: 单词 js动画和特效 网课 对这段时间所学进行总结

  • 文字特效

    18种基于anime.js的文字动画特效效果演示CSS3文字烟雾散开动画特效canvas+原生js实现立体式文字变...

  • anime.js实现logo动画

    之前无聊浏览特效的时候,发现了anime.js的logo动画特效,于是也想整个自己的logo动画。着手coding...

  • 16 - 序列图片

    HTML结构 Css样式 Js代码 特效展示 此动画并不完整 会有点bug 但是足够可以帮助小白理解Js动画

  • 网站推荐 (不定时更新)

    1.网页设计 jQuery插件库:JS特效,网页特效,以及各种html5,css3动画和效果Bootstrap,来...

  • jQuery入门

    jQuery是js的函数库。 功能: html元素选择与操作 css操作 html事件函数 JS特效和动画 Htm...

  • iOS黑科技【动画特效篇-1】 立方体翻转特效--CubicTu

    iOS黑科技【动画特效篇】第一期 今天起为大家带来iOS动画特效合集,APP如美女,动画如衣裳,别让你家的美女再裸...

  • 1.学习过程中不熟悉的知识点

    js特效-day01 一、自定义动画 animation:flash 0.5s alternate infinit...

  • js特效篇---粒子特效

    Proton http://a-jie.github.io/Proton/#example

网友评论

      本文标题:JS的特效:动画篇

      本文链接:https://www.haomeiwen.com/subject/umolhttx.html