本次练习错误总结：

1. 改变border的宽度，属性名称不是直接写border，而是borderWidth。

2. 运动函数 -- 清除定时器 -- 开启新的定时器。  不是在新定时器开启之后再清除，而是开启之前就要在运动函数里清空一次！

3. 这个获取的值需要先parseInt变成数字。  且变量要放在定时器函数里面。（哪个函数使用的变量，就放在哪个函数里。）

var cur = parseInt(getStyle(obj, attr));




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    div{

      width: 200px;

      height: 200px;

      border: 10px solid black;

      background-color: yellow;

      float: left;

      margin: 30px;

    }

  </style>

  <script>

    window.onload = function () {

      var oDiv1 = document.getElementById('div1');

      oDiv1.onmouseover = function () {

        startMove(this, 'width', 600)

      };

      oDiv1.onmouseout = function () {

        startMove(this, 'width', 200)

      };

      var oDiv2 = document.getElementById('div2');

      oDiv2.onmouseover = function () {

        startMove(this, 'height', 600)

      };

      oDiv2.onmouseout = function () {

        startMove(this, 'height', 200)

      };

      var oDiv3 = document.getElementById('div3');

      oDiv3.onmouseover = function () {

        startMove(this, 'font-size', 50)

      };

      oDiv3.onmouseout = function () {

        startMove(this, 'font-size', 10)

      };

      var oDiv4 = document.getElementById('div4');

      oDiv4.onmouseover = function () {

        startMove(this, 'borderWidth', 150) //不是border，是borderWidth

      };

      oDiv4.onmouseout = function () {

        startMove(this, 'borderWidth', 10)

      };

    };

    function getStyle(obj, name) {

      if(obj.currentStyle)

        {

        return obj.currentStyle[name];

      }

      else

        {

          return getComputedStyle(obj, false)[name];

        }

    };

    function startMove(obj, attr, iTarget)

    {

      clearInterval(obj.timer); //清除定时器是放在运动函数里，新启动定时器之前，不是新启动的定时器里面。

      obj.timer = setInterval( function () {

        var cur = parseInt(getStyle(obj, attr));//这个变量也要放在定时器里面吗？？（一开始是放在运动函数里了）

        var speed = (iTarget - cur)/4;

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

        if( cur == iTarget )

        {

          clearInterval(obj.timer)

        }

        else

          {

            obj.style[attr] = cur + speed + 'px';

          }

      },30)

    }

  </script>

</head>

<body>

<div id="div1">变宽</div>

<div id="div2">变高</div>

<div id="div3">这些字体会变大哦</div>

<div id="div4">border变化</div>

</body>

</html>


												


											
JS错误记录 - getStyle代替offset、任意值运动框的更多相关文章
	

    
								
  1. JS错误记录 - 右侧悬浮框 - 缓冲运动
		
    本次练习错误总结: 1.  正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...
    
		
    2. 
						
  2. JS错误记录 - 微博发布
		
    <style> *{ margin: 0; padding: 0;} #ul1{ width: 400px; height: 400px; border: 1px solid #000;  ...
    
		
    3. 
						
  3. JS错误记录  - dom操作 - 排序
		
    本次练习错误总结: 1. for循环要套到按钮的onclick里面,否则onclick点击事件无法依次执行. 2. var n1, var n2 这两个变量是arr.sort排序使用的,所以应该放在s ...
    
		
    4. 
						
  4. JS错误记录 - 事件 - 拖拽
		
    错误总结: 1. var disX = 0;   现在window.onload里声明变量,而不是在事件oDiv.onmousedown里面声明并赋值. 对于这个还不是很明白. 2. onmoused ...
    
		
    5. 
						
  5. JS错误记录 - 按左右箭头div移动、一串div跟着鼠标移动
		
    本次练习错误总结: 1. div跟着用户操作而移动,首先必须要绝对定位,否则无法移动. 2. if条件语句里面是双等号,不是单等号(赋值). 3. 坐标值没有Right,只能offsetLeft 加减 ...
    
		
    6. 
						
  6. JS错误记录 - To-do List
		
    var data = (localStorage.getItem('todolist'))? JSON.parse(localStorage.getItem('todolist')) : { todo ...
    
		
    7. 
						
  7. JS错误记录 - fgm练习 - 函数传参
		
    <script> window.onload = function() { var oBtn = document.getElementsByTagName('button')[0]; v ...
    
		
    8. 
						
  8. JS错误记录 - 记录上次登陆的用户名
		
    <script> //步骤 1.submit => 用户名存进cookie 2. onload => 从cookie读取用户名 window.onload = function ...
    
		
    9. 
						
  9. JS错误记录 - 取消事件冒泡、按钮、回车、ctrl回车提交留言
		
    window.onload = function () { var oDiv = document.getElementById('div1'); var oBtn = document.getEle ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 文件/文件夹权限设置命令chmod的具体使用方法
			
    chmod是文件/文件夹权限设置的命令,在Linux中常常遇到.本博文下面总结chmod的具体使用方法. Linux/Unix的档案调用权限分为三级,即档案拥有者user.群组group.其它othe ...
    
			
    2. 
						
  2. Codeforces 472D
			
    看官方题解提供的是最小生成树,怎么也想不明确.you can guess and prove it! 看了好几个人的代码.感觉实现思路全都不一样,不得不佩服cf题目想法的多样性 以下说说我自己的理解, ...
    
			
    3. 
						
  3. js---07 js预解析，作用域---闭包
			
    js解析器首先不会逐行读代码,这是第二部了. 首先 根据var找到变量,根据function找函数,找到变量var a = 1,js解析器只会读取等号前面的var a,并把a设置值未定义,并不会读取等 ...
    
			
    4. 
						
  4. Anders Hejlsberg 和 Erich Gamma
			
    Anders Hejlsberg 和 Erich Gamma 大概半年前,我写了一篇名叫<有点软文>的文章,深情并茂地告诉大家,我司其实隐藏着很多牛人巨擘.有些人是身怀屠龙技,但是大家不认 ...
    
			
    5. 
						
  5. Elasticsearch之需要注意的问题（es和jdk版本）
			
    (1)在使用java代码操作es集群的时候 要保证本地使用的es的版本和集群上es的版本保持一致.  (2)保证集群中每个节点的JDK版本和es基本配置一致 这个很简单,不多说.  (3)es集群中j ...
    
			
    6. 
						
  6. 基于x86平台的Solaris安装视频（时长25分钟）
			
    基于X86平台的Solaris安装视频 本视频分为三个部分分别在附件中1.2.3(第三部分附件较大请在这里下载:http://down.51cto.com/data/263614) ,远程连接的视频由 ...
    
			
    7. 
						
  7. gdal读写图像分块处理
			
    转自赵文原文 gdal读写图像分块处理(精华版) Review: 用gdal,感觉还不如直接用C++底层函数对遥感数据进行处理.因为gdal进行太多封装,如果你仅仅只是Geotif等格式进行处理,IO ...
    
			
    8. 
						
  8. iOS -读书笔记-网络请求
			
    知道"3次握手"吗?突然想起这个词 什么是3次握手? TCP三次握手/四次挥手详解 这里是3次握手的详解 3次握手就是为了可靠的传送数据,TCP(什么是TCP呢?TCP就是一种可靠 ...
    
			
    9. 
						
  9. 计蒜客 429(腾讯手机地图-pi的精确值)
			
    腾讯手机地图的定位功能用到了用户手机的多种信号.这当中有的信号的作用范围近.有的信号作用的范围则远一些.有的信号相对于用户在不同的方位强度是不同的.有的则是在不论什么一个方向上信号强度都一致的. 已知 ...
    
			
    10. 
						
  10. 安装 VNC 和 XRDP
			
    安装 VNC 和 XRDPapt-get install vnc4server tightvncserver xrdp fluxbox xtermcat >vncstop.sh << ...
    
			
    11.