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 ...
随机推荐
- LRJ入门经典-0907万圣节的小L306
原题 LRJ入门经典-0907万圣节的小L306 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 今天是万圣节,小L同学开始了 ...
- HDU——T 1556 Color the ball
http://acm.hdu.edu.cn/showproblem.php?pid=1556 Time Limit: 9000/3000 MS (Java/Others) Memory Limi ...
- hdu5372 Segment Game
Problem Description Lillian is a clever girl so that she has lots of fans and often receives gifts f ...
- jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- Docs-->.NET-->API reference-->System.Web.UI-->Control-->Methods-->FindControl
https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.control.findcontrol?view=netframework-4.7 ...
- onvif开发总结
ONVIF开发经验总结 ONVIF开发经验总结............................................................................. ...
- 深入理解Android（2）——理解Android中的JNI（中）
阳光小强参加了CSDN博客之星评选,如果你觉得阳光小强的博客对你有所帮助,为小强投上一票吧:http://vote.blog.csdn.net/blogstar2014/details?usernam ...
- 设计模式之禅——模板方法模式&钩子方法
** **板方法模式的定义: 定义一个操作的算法的框架,而将一些步骤延迟到子类中.使得子类可以不改变一个算法的框架即可重定义该算法的某些特定步骤. 例子:做一个简单的悍马车的模型 见UML图 一个抽象 ...
- HDU——T 1711 Number Sequence
http://acm.hdu.edu.cn/showproblem.php?pid=1711 Time Limit: 10000/5000 MS (Java/Others) Memory Lim ...
- D. Dreamoon and Sets（Codeforces Round #272)
D. Dreamoon and Sets time limit per test 1 second memory limit per test 256 megabytes input standard ...