JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>任意值的运动框架</title>
<style>
div {
float: left;
width: 200px;
height: 200px;
margin: 20px;
background-color: yellow;
border: 1px solid black;
font-size: 14px;
filter: alpha(opacity=30); /*IE*/
opacity: 0.3; /*火狐,chrome*/
} </style>
<script> window.onload = function () {
//Div变高
var oDiv1 = document.getElementById('div1'); oDiv1.onmouseover = function () {
startMove(this, 'height', 400);
};
oDiv1.onmouseout = function () {
startMove(this, 'height', 200);
};
//Div变宽
var oDiv2 = document.getElementById('div2'); oDiv2.onmouseover = function () {
startMove(this, 'width', 400);
};
oDiv2.onmouseout = function () {
startMove(this, 'width', 200);
};
//改变文字大小
var oDiv3 = document.getElementById('div3');
oDiv3.onmouseover = function () {
startMove(this, 'fontSize', 30);
};
oDiv3.onmouseout = function () {
startMove(this, 'fontSize', 14);
};
//修改透明度
var oDiv4 = document.getElementById('div4'); oDiv4.onmouseover = function () {
startMove(this, 'opacity', 100);
};
oDiv4.onmouseout = function () {
startMove(this, 'opacity', 30);
}; }; //属性值的获取函数
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
}
else {
return getComputedStyle(obj, false)[name];
}
} //运动框架
var timer = null;
function startMove(obj, attr, iTarget) { //obj代表对象,attr代表目标属性,iTarget代表设定的属性目标值
clearInterval(obj.timer); //每次执行函数之前清除定时器,保证每次只有一个定时器在工作
obj.timer = setInterval(function () {
var cur = 0;
if (attr == 'opacity') { //透明度属性的获取
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Math.round针对IE7出现小数的问题
}
else {
cur = parseInt(getStyle(obj, attr)); //非透明度的属性值获取
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //向上取整（速度为正值）和向下取整（速度为负值）
if (cur == iTarget) {
clearInterval(obj.timer); //达到目标值时清除定时器
}
else {
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')'; //IE浏览器
obj.style.opacity = (cur + speed) / 100; //火狐,chrome
}
else {
obj.style[attr] = cur + speed + 'px'; //非透明度属性值
}
}
}, 30);
} </script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">I Love JavaScript!</div>
<div id="div4">修改透明度</div> </body>
</html>
关于JS运动框架，需要注意的点如下：
1. 透明度和非透明度属性值的获取和赋值需要分开设置；一般属性的单位值为px，透明度没有单位；
2. 透明度有兼容性问题;IE浏览器: filter:alpha(opacity=30); 火狐和chrome: opacity = 0.3; 因为透明度的值为小数，所以获取时需要使用parseFloat方法而非parseInt，后者会将透明度的值取0，从而设置无效；
3. 在IE7下，parseFloat（）*100得出的值可能为非整数，需要使用Math.round进行四舍五入做兼容处理；
4. speed = iTarget - cur, 得出的值可能为正或为负的小数，如果为正需要向上取整，为负向下取整，如果不进行此操作，将永远无法达到目标值，计算机关于属性值最小计算单位为1px,当 var speed = (iTarget - cur) / 6 的值小于0.5时会被忽略，具体请参考如下例子，当speed=0.4和0.5时，点击按钮时文本框内数值的变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width:100px;
height:50px;
background-color: yellow;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn1');
oBtn.onclick = function () {
var speed = 0.5;
// var speed = 0.4;
oDiv.style.width = oDiv.offsetWidth + speed + 'px';
document.getElementById('text1').value = oDiv.offsetWidth;
}; }
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" id="btn1" value="按钮">
<input type="text" id="text1">
</body>
</html>
关于小数取整的例子
5. 关于定时器：在每次执行运动框架内的定时器之前，应当清除所有定时器，保证每次只有一个定时器在运作，否则多个定时器同时工作会出bug，运行速度越来越快。
6. 当出现相同冗余代码时，可以适当引入参数，简化代码。
JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）的更多相关文章
- js再学习笔记
#js再学习笔记 ##基本 1.js严格区分大小写 2.js末尾的分号可加,也可不加 3.六种数据类型(使用typeof来检验数据的类型) `typeof` - undefined: `var ...
- JS数组学习笔记
原文:JS数组学习笔记 最近在备课数组,发现很多ES5的方法平时很少用到.细节比较多,自己做了大量例子和整理,希望对大家了解JavaScript中的Array有所帮助. 概念 数组是值的有序集合.每个 ...
- 并发编程学习笔记(12)----Fork/Join框架
1. Fork/Join 的概念 Fork指的是将系统进程分成多个执行分支(线程),Join即是等待,当fork()方法创建了多个线程之后,需要等待这些分支执行完毕之后,才能得到最终的结果,因此joi ...
- Quartz学习笔记：集群部署&高可用
Quartz学习笔记:集群部署&高可用 集群部署 一个Quartz集群中的每个节点是一个独立的Quartz应用,它又管理着其他的节点.这就意味着你必须对每个节点分别启动或停止.Quartz集群 ...
- Knockout.js快速学习笔记
原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-Vie ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 两万字Vue.js基础学习笔记（二）
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- 从零开始学习Vue.js，学习笔记
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...
- handlebars.js基础学习笔记
最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...
随机推荐
- [AngularJS] Accessing Scope from The Console
Using Angular, you can actually access the scope and other things from the console, so when you have ...
- 在Swift中的ASCII到字符转换的问题
我们在C++里处理字符通常是这样的 char a = 'A' // A = 65 printf("'%c' = %d", a + 1, a + 1) // 'B' = 66 这在号 ...
- iOS开发——UI高级OC篇&自定义控件之调整按钮中子控件（图片和文字）的位置
自定义控件之调整按钮中子控件(图片和文字)的位置 其实还有一种是在storyBoard中实现的,只需要设置对应空间的左右间距: 这里实现前面两种自定义的方式 一:imageRectForContent ...
- mysql记录sql执行时间
1.开启和关闭mysql> set profiling=1;mysql> set profiling=0; information_schema 的 database 会建立一个PROFI ...
- [Java] 内部类总结
内部类是指在一个外部类的内部再定义一个类.内部类作为外部类的一个成员,并且依附于外部类而存在的.内部类可为静态,可用protected和private修饰(而外部类只能使用public和缺省的包访问权 ...
- Java基础知识强化之IO流笔记72：NIO之 NIO核心组件（NIO使用代码示例）
1.Java NIO 由以下几个核心部分组成: Channels(通道) Buffers(缓冲区) Selectors(选择器) 虽然Java NIO 中除此之外还有很多类和组件,Channel,Bu ...
- 【阿里云产品公测】阿里云OpenSearch初次使用评测
作者:阿里云用户 bailimei 从一开始我就对opensearch非常陌生,这是我第一次接触它,本以为对我来说上手难度会比较大,看完帮助信息后我决定试用看看,经试用后我发现阿里云opensearc ...
- 【阿里云产品公测】开放搜索服务 opensearch java jdk 应用体验之 机器人聊天
作者:阿里云用户啊里新人 需求:基本实现智能聊天! 最近在开发一款机器人,希望实现基本的聊天功能,词库是有的,但是如果是做完全匹配这个出来的效果很悲催, 比如词库:你好,回答是:哈哈,很好啊. 如 ...
- iOS菜鸟总结1
我从第一次接触OC,我觉得想要学好就必须有提前的知识的储备(比如c,java).这样就可更好了解面向对象的这一思想.学起来就不是很吃力了,本来OC就是比较难学的语言.工欲善其事,必先利其器,Xcode ...
- Oracle基础（九） Oracle的体系结构
一.Oracle体系结构概述: Oracle的体系结构是指数据库的组成.工作过程与原理,以及数据在数据库中的组织与管理机制.要了解Oracle数据库的体系结构,必须理解Oracle系统的重要概念和主要 ...