定时器及运动函数。

多div变宽：

<!--

Author: XiaoWen

Create a file: 2016-12-13 09:36:30

Last modified: 2016-12-13 12:24:18

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>js多div变宽</title>

  <style>

    div{

      width: 100px;

      height: 40px;

      background: #f00;

      margin-bottom: 20px;

    }

  </style>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<script>

  var a_div=document.getElementsByTagName('div');

  console.log(a_div)

  var timer=null;

  for(var i=0;i<a_div.length;i++){

    a_div[i].onmouseover=function(){

      startMove(this,400);

    };

    a_div[i].onmouseout=function(){

      startMove(this,100);

    };

  };

  function getStyle(obj,attr){

    if(obj.currentStyle){

      return obj.currentStyle[attr];

    }else{

      return getComputedStyle(obj)[attr];

    };

  };

  var speed;

  function startMove(obj,iTarget){

    clearInterval(obj.timer);

    obj.timer=setInterval(function(){

      //当目标比自身小时向上，当目标比自身大时向下

      //当目标比较大时，会一直加，如果不向上取会少加

      //当目标比较小时，会一直减，如果不向上取会少减

      //不怕多加，也不怕多减，因为只要到达目标值都会结束运行。

      //多加时是正数，向上取才能多

      //多减时是负数，向下取才能让负数更大

      var speed=(iTarget-parseInt(getStyle(obj,'width')))/8;

      if(speed<0){

        speed=Math.floor(speed);

      }else{

        speed=Math.ceil(speed);

      };

      if(parseInt(getStyle(obj,'width'))==iTarget){

        clearInterval(obj.timer);

      }else{

        obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';

      };

    },10);

  };

</script>

</body>

</html>

二级菜单：

<!--

Author: XiaoWen

Create a file: 2016-12-13 09:36:30

Last modified: 2016-12-13 16:29:44

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>js多div变宽</title>

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    #tag{

      height: 40px;

      background: #ccc;

    }

    ul,li{

      list-style: none;

    }

    #tag li{

      width: 150px;

      height: 40px;

      float: left;

      background: #ddd;

      position: relative;

      overflow: hidden;

    }

    #tag li a{

      display: block;

      width: 150px;

      height: 40px;

    }

    #tag li div{

      width: 150px;

      height: 400px;

      background: #eee;

    }

  </style>

</head>

<body>

<div id="box">

  <div id="tag">

    <ul>

      <li>

        <a href="#">1</a>

        <div>11</div>

      </li>

      <li>

        <a href="#">2</a>

        <div>22</div>

      </li>

      <li>

        <a href="#">3</a>

        <div>33</div>

      </li>

      <li>

        <a href="#">4</a>

        <div>44</div>

      </li>

      <li>

        <a href="#">5</a>

        <div>55</div>

      </li>

      <li>

        <a href="#">6</a>

        <div>66</div>

      </li>

    </ul>

  </div>

</div>

<script>

 var cont=document.getElementById('tag');

  var a_li=cont.getElementsByTagName('li');

  var a_div=cont.getElementsByTagName('div');

  var timer=null;

  for(var i=0;i<a_li.length;i++){

    a_li[i].onmouseover=function(){

      startMove(this,'height',400);

    };

    a_li[i].onmouseout=function(){

      startMove(this,'height',40);

    };

  };

  function startMove(obj,attr,iTarget){

    clearInterval(obj.timer);

    obj.timer=setInterval(function(){

      var speed=(iTarget-parseInt(getStyle(obj,attr)))/8;

      var speed=speed>0? Math.ceil(speed) : Math.floor(speed);

      if(speed==iTarget){

        clearInterval(obj.timer);

      }else{

        obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px';

      };

    },50);

  };

  function getStyle(obj,attr){

    if(obj.currentStyle){

      return obj.currentStyle[attr];

    }else{

      return getComputedStyle(obj)[attr];

    }

  }

</script>

</body>

</html>

js运动：多div变宽、二级菜单的更多相关文章

  1. （42）JS运动之多物体框架--多个div变宽

    假设仅仅为div加入一个定时器的话.在多个div变宽的时候会发生故障.可是假设为每一个div加入一个定时器.那么就能够实现多个物体变宽. 注意:在多物体运动的情况下,全部东西不能共用.offsetXX ...

  2. JS实现的简单横向伸展二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 第十五篇 JS 移入移出事件 模拟一个二级菜单

    JS 移入移出事件 模拟一个二级菜单   老师演示一个特别简单二级菜单,同学们除了学习JS,还要注意它的元素和CSS样式. 这节课介绍的是JS鼠标移入.移出事件:onmouseover是移入事件,on ...

  4. JS多物体运动案例：变宽、变高

    任务描述: 当鼠标移入"变宽"矩形时,该矩形宽度逐渐增加至400px,移出该矩形,宽度逐渐恢复至初始值;当鼠标移入"变高"矩形时,该矩形高度逐渐增加至400px ...

  5. 第4天：JS入门-给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...

  6. HTML案例—很讨巧的一种js+css制作hover模式展示二级菜单方法

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>利 ...

  7. JavaScript学习总结【11】、JS 运动

    动画效果在网站中是一种非常常见的交互式体验效果,比如侧边栏分享.图片淡入淡出,我们把这种动画效果就叫做运动,也就是让物体动起来.如果想让一个物体动起来,无非就是改变它的速度,也就是改变属性值,比如 l ...

  8. 第十节 JS运动中级

    链式运动框架. 回调函数 运动停止时,执行函数 运动停止时,开始下一次运动 <!DOCTYPE html> <html lang="en"> <hea ...

  9. JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. step6----->往工程中添加spring boot项目------->修改pom.xml使得我的project是基于spring boot的，而非直接基于spring framework

    文章内容概述: spring项目组其实有多个projects,如spring IO platform用于管理external dependencies的版本,通过定义BOM(bill of mater ...

  2. 【POJ3237】Tree（树链剖分）

    题意:在一棵N个节点,有边权的树上维护以下操作: 1:单边修改,将第X条边的边权修改成Y 2:区间取反,将点X与Y在树上路径中的所有边边权取反 3:区间询问最大值,询问X到Y树上路径中边权最大值 n& ...

  3. 【BZOJ3504】危桥（最大流）

    题意:见题面 思路:http://www.cnblogs.com/chenyushuo/p/5139556.html 必须交换b1,b2做第二次最大流的原因: 假如一个a1到b2的一个流和b1到a2的 ...

  4. IntelliJ IDEA 16 本地LicenseServer激活（破解）

    IntelliJ IDEA 16 本地LicenseServer激活(破解) IntelliJ IDEA 是Java开发利器,用社区版不爽,干催就用旗舰版,这个是收费的,需要licence. 网上找到 ...

  5. [html]选项卡效果

    晨间新闻 午间新闻 晚间新闻 视频新闻 <!doctype html> <html> <head> <meta charset="UTF-8&quo ...

  6. UVA 11624 Fire!（广度优先搜索）

    题目大意:在一个N*M的迷宫内,J代表某人(只有一个),F代表火(可能不只一个),#代表墙,火每分钟会向四周除了墙以外的地方扩散一层,问人能否在没被火烧到 之前逃出迷宫,若能逃出输出最短时间.很明显的 ...

  7. Dev GridControl数据导出格式问题

    环境:DevExpress9.3,Vs2008 DevExpress的GridControl提供方便的数据导出到Excel功能,导出中用户可以根据GridControl的格式进行导出(ExportTo ...

  8. opencv写视频

    代码: #include<opencv2/opencv.hpp> using namespace cv; #include<string> using namespace st ...

  9. coreseek实战(一)：windows下coreseek的安装与测试

    coreseek实战(一):windows下coreseek的安装与测试 网上关于 coreseek 在 windows 下安装与使用的教程有很多,官方也有详细的教程,这里我也只是按着官方提供的教程详 ...

  10. .net WebApi中使用swagger

    我在WebApi中使用swagger的时候发现会出现很多问题,搜索很多地方都没找到完全解决问题的方法,后面自己解决了,希望对于遇到同样问题朋友有帮助.我将先一步一步的演示项目中解决swagger遇到问 ...