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 ...
随机推荐
- 【Codeforces Round #459 (Div. 2) A】Eleven
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 这个数列增长很快的. 直接暴力模拟看看是不是它的一项就好了 [代码] #include <bits/stdc++.h> ...
- 洛谷 P3585 [POI2015]PIE
P3585 [POI2015]PIE 题目描述 一张n*m的方格纸,有些格子需要印成黑色,剩下的格子需要保留白色.你有一个a*b的印章,有些格子是凸起(会沾上墨水)的.你需要判断能否用这个印章印出纸上 ...
- RHEL7.1安装VNC
1.安装包 yum install vnc* -y 2.创建password vncserver 3.创建參数文件 [root@single ~]# cp /lib/systemd/system/vn ...
- 转：IOS推送代码
实例:调用方法:- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary ...
- SQL 增删改查（具体）
一.增:有3种方法 1.使用insert插入单行数据: insert [into] <表名> [列名] values <列值> insert into Strdents (na ...
- Android学习笔记进阶20 之得到图片的缩略图
<1>简介 之前往往是通过Bitmap.Drawable和Canvas配合完成,需要写一系列繁杂的逻辑去缩小原有图片,从而得到缩略图. 现在我给大家介绍一种比较简单的方法:(网上有) 在A ...
- 给iOS项目中添加图片，并通过UIImageView引用和显示该UIImage图片
[问题] 关于iOS/iPhone中的文件选择对话框,用于用户去选择图片等文件 过程中,问题转换为,需要给当前iOS项目中,添加一个图片. 类似于Windows开发中的资源文件,其中图片文件属于资源的 ...
- 【Codeforces Round #426 (Div. 2) A】The Useless Toy
[Link]:http://codeforces.com/contest/834/problem/A [Description] [Solution] 开个大小为4的常量字符数组; +n然后余4,-n ...
- Java反射之getInterfaces()方法
今天学习Spring3框架,在理解模拟实现Spring Ioc容器的时候遇到了getInterfaces()方法.getInterfaces()方法和Java的反射机制有关.它能够获得这个对象所实现的 ...
- Linux下进程终止过程
不管是在什么系统中,当进程终止之后.系统都须要释放进程占有的资源. 否则.系统资源会被耗尽. 以下将具体说明Linux系统中,进程终止的过程. 进程终止方式 linux的进程终止方式有8种,当中5种是 ...