终于放寒假了,哈哈哈,然后,也不准备闲着吧,就是再熟悉一下旧的东西,然后把新的东西也拿来分享一下,自己也准备好了再这个寒假

好好的提高一下自己,哎,菜鸟一枚,真正去实战了,发现自己手上的武器太少了,所以就,加油加油,这个寒假好好的完成计划。

嗯,废话也不多说了,先介绍,三种js基本动画,匀速吗,变速,透明度变化。

匀速

代码如下:

  1. <script>
  2. window.onload=function(){
  3. var div1 = document.getElementById("div1");/*获取变化的框Id,div我称之为框*/
  4. div1.onmouseover=function(){
  5. onMove(10,0);/*鼠标移入,这两个数值,分别控制速度,和到达目标的位置数值*/
  6. }
  7. div1.onmouseout=function(){
  8. onMove(-10,-200)/*鼠标移出,如上*/
  9. }
  10. }
  11. var timer=null;/*全局变量,clearInterval()清除的是他上一链的东西*/
  12. function onMove(speed,mu){
  13. clearInterval(timer);/*避免用户多次点击,产生多个定时器*/
  14. var div1 = document.getElementById("div1");
  15. timer=setInterval(function(){
  16. if(div1.offsetLeft == mu)
  17. {
  18. clearInterval(timer);/*作用:不让其一直变化下去*/
  19. }
  20. else{
  21. div1.style.left=div1.offsetLeft+speed+"px";
  22. }
  23. },30)
  24. }
  25.  
  26. </script>

变速

代码如下:

  1. <script>
  2. window.onload=function(){
  3. var div1 = document.getElementById("div1");
  4. div1.onmouseover=function(){
  5. onMove(10,0);
  6. }
  7. div1.onmouseout=function(){
  8. onMove(-10,-200)
  9. }
  10. }
  11. var timer=null;/*全局变量,clearInterval()清除的是他上一链的东西*/
  12. function onMove(speed,mu){
  13. clearInterval(timer);
  14. var div1 = document.getElementById("div1");
  15. timer=setInterval(function(){
  16. speed=(mu-div1.offsetLeft)/15;
  17. /*与上述不同之处,变速可以在这里控制*/
  18. speed=speed>0?Math.ceil(speed):Math.floor(speed-1);
    /*这里面最后多减1是因为浏览器问题*/
  19. if(div1.offsetLeft == mu)
  20. {
  21. clearInterval(timer);
  22. }
  23. else{
  24. div1.style.left=div1.offsetLeft+speed+"px";
  25. }
  26. },30)
  27. }
  28.  
  29. </script>

透明度变化

代码如下:

  1. <script>
  2. window.onload = function(){
  3.  
  4. div1.onmouseover = function(){
  5. OnOpacity(5,100);/*鼠标移入,两个数值分别控制,变化的速率和到达的透明度值是多少*/
  6. }
  7. div1.onmouseout = function(){
  8. OnOpacity(-5,30);/同上/
  9. }
  10. }
  11. var timer=null;
  12. var alpha=30;
  13. function OnOpacity(speed,mu){
  14. var div1 = document.getElementById("div1");
  15. clearInterval(timer);
  16. timer=setInterval(function(){
  17. if(alpha == mu)
  18. {
  19. clearInterval(timer);
  20. }
  21. else
  22. {
  23. alpha+=speed;
  24. div1.style.opacity=alpha/100;
  25. }
  26. },10)
  27. }
  28. </script>

  

js动画(一)的更多相关文章

  1. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  2. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  3. CSS VS JS动画,哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  4. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  5. css与 js动画 优缺点比较

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...

  6. [学习笔记]js动画实现方法,作用域,闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

  7. css3动画与js动画的一些理解

    http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...

  8. js动画(四)

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

  9. css动画特效与js动画特效(一)------2017-03-24

    1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...

  10. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

随机推荐

  1. [译]JDK 6 and JDK 7中的subString()方法

    (说明,该文章翻译自The substring() Method in JDK 6 and JDK 7) 在JDK 6 and JDK 7中的substring(int beginIndex, int ...

  2. Repository 仓储

    Repository 仓储 写在前面 首先,本篇博文主要包含两个主题: 领域服务中使用仓储 SELECT 某某某(有点晕?请看下面.) 上一篇:Repository 仓储,你的归宿究竟在哪?(二)-这 ...

  3. DBMS_LOB包的使用

    DBMS_LOB包的使用 1.  dbms_lob.append( dest_lob  IN  OUT  NOCOPY  BLOB, src_lob  IN  BLOB) dbms_lob.appen ...

  4. setTimeout与setInterval的区别

    setTimeout与setInterval的区别:1.setTimeout设置后隔指定时间后只会执行一次2.setInterval设置后会每隔指定时间执行一次3.setTimeout一般在方法内部使 ...

  5. SQLSERVER误删Windows登录用户

    SQLSERVER误删除了Windows登录用户验证方式使用Windows身份验证的解决方法   SQLSERVER误删Windows登录用户验证方式使用Windows身份验证的解决方法 今天看到这篇 ...

  6. 手机APP下单支付序列图

    今天安装了Visio,学习了下如何使用,画了一下公司现在项目的下单支付序列图,话就不多说了,直接上图,处女作,欢迎指正!

  7. 【ios开发】控件细究1:UITableView

    工作了将近两个月,共接手两个项目,在项目中用的最多的就是UITableView了,但是也是问题出现的最多的地方,由于一开始不熟练,导致很多问题花了很长时间才解决.所以利用这两天空闲时间,好好梳理一下这 ...

  8. noip模拟赛:电话时间[字符串]

    [问题描述] 某人总是花很多时间给父母打电话.有一次他记录了打电话的开始时间和结束时刻t1和t2,请你帮他算算此次通话一共用了多少秒.又有一次,他记录了打电话的开始时刻t1和通话的时间长度len,请你 ...

  9. 使用Fiddler伪造服务端返回数据,绕过软件试用期验证

    用过一款和visual studio集成非常好的移动端模拟器,有7天的试用期,可惜不支持国内支付,试用到期了怎么办,不想重装系统. 昨天看有人破解admin page,于是尝试自己动手试试,因为这款模 ...

  10. [转]Data Structure Recovery using PIN and PyGraphviz

    Source:http://v0ids3curity.blogspot.com/2015/04/data-structure-recovery-using-pin-and.html --------- ...