js入门学习~ 运动应用小例

时间:2022-09-07 18:24:55

js入门学习~ 运动应用小例

要实现的效果如下:

鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~

(且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~

----------------------------------------------------js代码如下 -----------------------------------------------------

//执行函数
window.onload = function(){
  //声明控制变量
  var aDiv = document.getElementsByTagName('div');

  //遍历
  for(var i=0;i<aDiv.length;i++){
    //添加自定义属性
    aDiv[i].timer = null;

    //添加事件(由于每个具体事件是不同的,所以单独来控制)
    aDiv[0].onmouseover = function(){
      moveStart(this,'width',400);
    }
    aDiv[0].onmouseout = function(){
      moveStart(this,'width',200);
    }

    aDiv[1].onmouseover = function(){
      moveStart(this,'height',400);
    }
    aDiv[1].onmouseout = function(){
      moveStart(this,'height',200);
    }

    aDiv[2].onmouseover = function(){
      moveStart(this,'opacity',100);
    }
    aDiv[2].onmouseout = function(){
      moveStart(this,'opacity',30);
    }
  }
}

//getStyle  获取对象的全局style属性

function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle;
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

//moveStart  运动函数

function moveStart(obj,attribute,iTarget){
  //多个物体运动框架
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
  //声明
    var current = 0;
    if(attribute == 'opacity'){
      current = parseFloat(getStyle(obj,attribute))*100;
    }
    else{
      current = parseInt(getStyle(obj,attribute));
    }
    //缓冲速度
    var speed = (iTarget - current )/4;
    //上下取整
    speed = speed>0? Math.ceil(speed):Math.floor(speed);

    //静
    if(iTarget == current){
      clearInterval(obj.timer);
    }
    else{
      if(attribute == 'opacity'){
        obj.style.filter = 'alpha(opacity:'+(current+speed)+')';
        obj.style.opacity = (current + speed)/100;
      }
      else{
        obj.style[attribute] = current+speed+'px';
      }
    }

  },30);
}

---------------------------------------------------------------------------------

js的学习也有大半月了,进度还是很缓慢~~ 慢慢来了,还是基本功,编程基础不扎实, 慢慢来了~~

在原有学习计划上, 减少点打酱油时间, 多点看书事件,把js基础先补补~~

js入门学习~ 运动应用小例的更多相关文章

  1. JS入门学习,写一个时钟~

    <!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <t ...

  2. 测试驱动开发&lpar;TDD&rpar;及测试框架Mocha&period;js入门学习

    组里马上要转变开发模式,由传统的开发模式(Developer开发,QA测试),转变为尝试TDD(Test-driven development,测试驱动开发)的开发模型.由此将不存在QA的角色,或者仅 ...

  3. 微信小程序开发入门学习&lpar;1&rpar;&colon;石头剪刀布小游戏

    从今天起开始捣鼓小程序了2018-12-17   10:02:15 跟着教程做了第一个入门实例有兴趣的朋友可以看看: 猜拳游戏布局 程序达到的效果 猜拳游戏的布局是纵向显示了三个组件:文本组件(tex ...

  4. Vue&period;JS入门学习随笔

    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...

  5. require&period;js 入门学习 (share)

    以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http:// ...

  6. react webpack&period;config&period;js 入门学习

    在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...

  7. 【带着canvas去流浪(11)】Three&period;js入门学习笔记

    目录 一. 资料推荐及建议 二. Three.js中的基本概念 三.重点笔记 四.补充示例 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址: ...

  8. JS入门学习,编写一个简易月历

    //今天最头疼的地方在于 getElementsByClassName()的 [] ~~ //错了N遍后只能说有点点头绪,如果不加[] 查找的就是全部吧 加上[]能精确控制的标签或者class &lt ...

  9. JS入门学习,写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

随机推荐

  1. Inventory Costing in AX 2009

    I wanted to explore some scenarios that illustrate a few important concepts related to inventory cos ...

  2. easyuidatagrid中load&comma;reload&comma;loadData的区别。

    摘要:datagrid中有load,reload,loadData那三个方式,皆是加载数据的,但又有差别.下面让我们一起来看看: 首先,load方法,比如我已经定义一个datagrid的id为grid ...

  3. db2工具优化

  4. &lbrack;每天一道A&plus;B&rsqb;签到检测程序

    签到检测程序,解析github提供的api内的json,解决了服务器和本地时间不同步的问题(时差+8H),实现按日期更新当前签到表.下一步是从api获取organization的信息,求出未签到的成员 ...

  5. linux 压缩&sol;解压命令大全

    .tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)———————————————.gz解压1:gun ...

  6. 成为Java GC专家(3)—如何优化Java垃圾回收机制

    为什么需要优化GC 或者说的更确切一些,对于基于Java的服务,是否有必要优化GC?应该说,对于所有的基于Java的服务,并不总是需要进行GC优化,但前提是所运行的基于Java的系统,包含了如下参数或 ...

  7. 使用sui实现的选择控件【性别、日期、省市级联】

    使用sui mobile做的选择控件,其中sm.js有修改,增加自定义api,详情请看index.html的注释,不多说了,上代码 <!DOCTYPE html> <html> ...

  8. 管理 MariaDB 用户账户

    哪些用户可以连接到MariaDB 服务器,他们都可以从哪些地方连接,连接到服务器后又能够做什么等,都是本文将涉及到的内容. 用户的权限信息都保存在 mysql 库中的几个权限表中.对 MariaDB ...

  9. Docker -d &colon; Running modprobe bridge nf&lowbar;nat failed with message&colon; exit status 1

    nf_nat 是做什么用的 - DockOne.iohttp://dockone.io/question/1384 docker-py的配置与使用 - openxxs - 博客园http://www. ...

  10. go web framework gin middleware 设计原理

    场景:一个middleware可以具体为一个函数,而由前面的gin 路由分析可得,每一个路径都对有一个HandlersChain 与其对应. 那么实际上增加一个middleware的过程,就是将每一个 ...