JS错误记录 - getStyle代替offset、任意值运动框
本次练习错误总结：
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、任意值运动框的更多相关文章
- JS错误记录 - 右侧悬浮框 - 缓冲运动
本次练习错误总结: 1. 正确: startMove( document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop); ...
- JS错误记录 - 微博发布
<style> *{ margin: 0; padding: 0;} #ul1{ width: 400px; height: 400px; border: 1px solid #000; ...
- JS错误记录 - dom操作 - 排序
本次练习错误总结: 1. for循环要套到按钮的onclick里面,否则onclick点击事件无法依次执行. 2. var n1, var n2 这两个变量是arr.sort排序使用的,所以应该放在s ...
- JS错误记录 - 事件 - 拖拽
错误总结: 1. var disX = 0; 现在window.onload里声明变量,而不是在事件oDiv.onmousedown里面声明并赋值. 对于这个还不是很明白. 2. onmoused ...
- JS错误记录 - 按左右箭头div移动、一串div跟着鼠标移动
本次练习错误总结: 1. div跟着用户操作而移动,首先必须要绝对定位,否则无法移动. 2. if条件语句里面是双等号,不是单等号(赋值). 3. 坐标值没有Right,只能offsetLeft 加减 ...
- JS错误记录 - To-do List
var data = (localStorage.getItem('todolist'))? JSON.parse(localStorage.getItem('todolist')) : { todo ...
- JS错误记录 - fgm练习 - 函数传参
<script> window.onload = function() { var oBtn = document.getElementsByTagName('button')[0]; v ...
- JS错误记录 - 记录上次登陆的用户名
<script> //步骤 1.submit => 用户名存进cookie 2. onload => 从cookie读取用户名 window.onload = function ...
- JS错误记录 - 取消事件冒泡、按钮、回车、ctrl回车提交留言
window.onload = function () { var oDiv = document.getElementById('div1'); var oBtn = document.getEle ...
随机推荐
- AJAX 前后端交互 验证信息是否正确
1.前段: function checkPtCode(obj){ $.ajax({ type: "post", url: "xxxxxxx", data: {& ...
- SPI总线工作模式
一.SPI总线工作模式 SPI总线有四种工作模式,是由时钟极性选择(CPOL)和时钟相位选择(CPHA)决定的. CPOL = 0 ,SPI总线空闲为低电平,CPOL = 1, SPI总线空闲为高电平 ...
- FZU 1096 QS Network
QS Network Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on FZU. Original ID: ...
- AES加密解密&&SHA1、SHA加密&&MD5加密
AES加密解密 SHA1.SHA加密 MD5加密 二话不说立即附上代码: package com.luo.util; import java.io.UnsupportedEncodingExcepti ...
- findFocus-获得拥有焦点的控件
所有的view控件有一个findFocus方法,这个方法如下 /** * Find the view in the hierarchy rooted at this view that current ...
- 网上看到的一些IT资源
A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板. Bootswatch:免费的Bootstrap主题. Templated:收集了845个免费的C ...
- css相关用法
1. 2. 3.offset([coordinates]) 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整型属性:top 和 left,以像素计.此方法只对可见元素有效. a.获取当前元素的 ...
- 2017国家集训队作业[arc076d/f][Exhausted?]
2017国家集训队作业[arc076d/f][Exhausted?] 题意: 有\(N\)个人,\(M\)把椅子,给出\(...L_i.R_i\)表示第\(i\)个人可以选择编号为\(1\sim ...
- Gym - 100502A Amanda Lounges
Amanda Lounges Time Limit: 1000MS Memory Limit: 524288KB 64bit IO Format: %I64d & %I64u AMAN ...
- src/MD2.c:31:20: 错误：Python.h：没有那个文件或目录
一.前言 在CentOS 上安装fabric时出现问题,首先已安装pip, 用pip执行以下命令pip install 出现以下问题 [niy@niy-computer /]$ sudo pip in ...