[学习笔记]JavaScript基础--淡入淡出
2015-08-08 15:04
671 查看
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> #div1 { width: 200px; height: 200px; background: blue; filter:alpha(opacity:30); opacity:0.3; } </style> <script> var alpha = 30; var timer = null; window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmouseover=function() { startMove(100); }; oDiv.onmouseout = function () { startMove(30); }; }; var timer=null; function startMove(iTarget) { var oDiv=document.getElementById('div1'); clearInterval(timer); timer = setInterval(function () { var speed = 0; if (alpha < iTarget) { speed = 1; } else { speed = -1; } if (alpha == iTarget) { clearInterval(timer); } else { alpha += speed; oDiv.style.filter = 'alpha(opacity:' + alpha + ')'; oDiv.style.opacity = alpha / 100; } }, 30); } </script> </head> <body> <div id="div1"> </div> </body> </html>
相关文章推荐
- [学习笔记]JavaScript基础--缓冲1
- [学习笔记]JavaScript基础--运动基础
- 环境的问题真麻烦 message Unable to compile class for JSP:
- [学习笔记]JavaScript基础--分享到
- JSTL核心标签库学习笔记
- JS中的数学计算<之简单实例讲解>
- JavaScript笔记
- jsonp不能post!
- JavaScript面向对象之类的创建
- JavaScript面向对象之类的继承
- JavaScript寄生组合式继承分析
- BZOJ 1031: [JSOI2007]字符加密Cipher( 后缀数组 )
- JSP简易留言板
- 高性能JavaScript DOM编程
- 如何使用Createjs来编写HTML5游戏(六)完成一个简单的打飞机游戏(上)
- 最简单简洁高效的Json数据解析
- secure crt js script /jaca script for secure crt
- JavaScript学习笔记——对象知识点
- js中三种时间循环的方法
- 【BOM操作】JavaScript中的event对象之总结