JS学习笔记 - 透明度运动框
该练习的笔记如下：
1. var cur=0; //先声明一个变量。
2. parseInt会舍掉小数，而opacity值恰恰是小数，所以对于opacity，必须用parseFloat。
cur=parseFloat(getStyle(obj, attr))*100;
3.
a. '+ var +' 字符串中引入变量的格式。
b. 透明度兼容性问题，需要2种分别赋值。
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
4. Math.round(); 四舍五入，舍去小数。 可解决parseFloat之后数值有很多小数位的问题。
5. 运动函数中，opacity的目标值是100，不是1。 （可直接记成和css里的相反。）
startMove(this, 'opacity', 100);
要根据后面的运用场景来看，这个值不是用来给式样赋值的。而是后面运动函数里使用的。
疑点：
这里字符串变量连接没有括号？ 需要搞清楚、熟记字符串连接规则的部分。
obj.style[attr]=cur+speed+'px';
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; filter:alpha(opacity:30); opacity:0.3;}
</style>
<script>
window.onload=function ()
{
var oDiv1=document.getElementById('div1'); oDiv1.onmouseover=function ()
{
startMove(this, 'opacity', 100);
};
oDiv1.onmouseout=function ()
{
startMove(this, 'opacity', 30);
};
}; 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=0; //先声明一个变量 if(attr=='opacity')
{
//cur=parseFloat(getStyle(obj, attr))*100; //parseInt会舍掉小数，而opacity值恰恰是小数，所以必须用parseFloat。
cur=Math.round(parseFloat(getStyle(obj, attr))*100); // Math.round(); 四舍五入，舍去小数。
}
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)+')'; // '+ var +' 字符串中引入变量的格式。
obj.style.opacity=(cur+speed)/100; //透明度兼容性问题需要2种分别赋值。
}
else
{
obj.style[attr]=cur+speed+'px'; //这里的字符串连接方式？
}
}
}, 30);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
JS学习笔记 - 透明度运动框的更多相关文章
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
随机推荐
- RocketMQ 就是耗内存
http://blog.csdn.net/loongshawn/article/details/51086876 https://rocketmq.incubator.apache.org/docs/ ...
- 【LeetCode-面试算法经典-Java实现】【008-String to Integer (atoi) （字符串转成整数）】
[008-String to Integer (atoi) (字符串转成整数)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Implement atoi to co ...
- 測试password强度
<html> <!--激情在最后面.请看最后面红色字 这是是个计算password强度的实例 网上有非常多这种样例 只是呢,都不怎么好 这是我写的一个完整的效果,能够通用, new一 ...
- Repeater控件的
http://blog.csdn.net/zhang_xinxiu/article/details/21872433 想起来,公司的aspx页面前台数据展示除了datagrid以为还有Repeater ...
- js简易留言板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- scrollwidth ,clientwidth ,offsetwidth 三者的区别
clientwidth:内容可视区域的宽度 offsetwidth:元素整体宽度 scrollwidth:实际内容的宽度
- fc---输出历史命令列表
fc指令 fc指令可以用于输出历史命令列表,也可以通过调用vi编辑器对历史指令内容进行编辑输出. 语法: fc [-e ename] [-lnr] [first] [last] 选项: -l:显示历史 ...
- 【习题 8-2 UVA-1610】Party Games
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 字符串排序后 显然是n/2-1和n/2这两个字符串进行比较. 设为a,b 找到第一个不相同的位置. 即0..i-1是相同的前缀,然后 ...
- ELK+KAFKA安装部署指南
一.ELK 背景 通常,日志被分散的储存不同的设备上.如果你管理数十上百台服务器,你还在使用依次登录每台机器的传统方法查阅日志.这样是不是感觉很繁琐和效率低下.当务之急我们使用集中化的日志管理,例如: ...
- POJ——T 2406 Power Strings
http://poj.org/problem?id=2406 Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 50627 ...