本次练习错误总结:

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. JS错误记录 - 微博发布

    <style> *{ margin: 0; padding: 0;} #ul1{ width: 400px; height: 400px; border: 1px solid #000; ...

  3. JS错误记录 - dom操作 - 排序

    本次练习错误总结: 1. for循环要套到按钮的onclick里面,否则onclick点击事件无法依次执行. 2. var n1, var n2 这两个变量是arr.sort排序使用的,所以应该放在s ...

  4. JS错误记录 - 事件 - 拖拽

    错误总结: 1. var disX = 0;   现在window.onload里声明变量,而不是在事件oDiv.onmousedown里面声明并赋值. 对于这个还不是很明白. 2. onmoused ...

  5. JS错误记录 - 按左右箭头div移动、一串div跟着鼠标移动

    本次练习错误总结: 1. div跟着用户操作而移动,首先必须要绝对定位,否则无法移动. 2. if条件语句里面是双等号,不是单等号(赋值). 3. 坐标值没有Right,只能offsetLeft 加减 ...

  6. JS错误记录 - To-do List

    var data = (localStorage.getItem('todolist'))? JSON.parse(localStorage.getItem('todolist')) : { todo ...

  7. JS错误记录 - fgm练习 - 函数传参

    <script> window.onload = function() { var oBtn = document.getElementsByTagName('button')[0]; v ...

  8. JS错误记录 - 记录上次登陆的用户名

    <script> //步骤 1.submit => 用户名存进cookie 2. onload => 从cookie读取用户名 window.onload = function ...

  9. JS错误记录 - 取消事件冒泡、按钮、回车、ctrl回车提交留言

    window.onload = function () { var oDiv = document.getElementById('div1'); var oBtn = document.getEle ...

随机推荐

  1. from disk cache 与 from memory cache

    webkit资源的分类 webkit的资源分类主要分为两大类:主资源和派生资 http状态码 200 from memory cache 不访问服务器,直接读缓存,从内存中读取缓存.此时的数据时缓存到 ...

  2. jQuery11 data() : 数据缓存

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用

    Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用 一.总结 一句话总结:$map['name'] = array('exp','is null'); 1.is null判断 ...

  4. LA 2531 The K-league 最大流

    #include <iostream> #include <cstdio> #include <fstream> #include <algorithm> ...

  5. C/C++(数据结构链表的实现)

    链表 List 链表实现了内存零碎片的有效组织. 静态链表 链表中有两个成员,数据域和指针域 数据域:我们存储的数据. 指针域:指针指向下一个具体的节点,代表了下一个节点的类型是链表类型. 所谓的指针 ...

  6. 洛谷 P1850 换教室

    P1850 换教室 题目描述 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程. 在可以选择的课程中,有 2n2n 节课程安排在 nn 个时间段上.在第 ii(1 \leq ...

  7. badblocks 检查硬盘是否有坏道

    硬盘是比較easy坏掉的设备,使用一段时间后可能会出现坏道等物理故障. 当硬盘出现坏道后,若不及时更换或者进行技术上的处理,磁盘的坏道就会越来越多,并会造成频繁死机和数据丢失. 最好的处理方法是更换新 ...

  8. poj3244(公式题)

    Difference between Triplets Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 2476   Acce ...

  9. 电商系统Broadleaf文档翻译(六) - 主要实体main entities

    主要实体 原文标题:main entities 原文出处:http://www.broadleafcommerce.com/docs/core/current/broadleaf-concepts/d ...

  10. 旧知识打造新技术--AJAX学习总结

    AJAX是将旧知识在新思想的容器内进行碰撞产生的新技术:推翻传统网页的设计技术,改善用户体验的技术. 学习AJAX之初写过一篇<与Ajax的初次谋面>.当中都仅仅是一些自己浅显的理解.这次 ...