[学习笔记]JavaScript基础--任意值运动框架
2015-08-08 22:55
861 查看
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <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 = Math.round(parseFloat(getStyle(obj, attr)) * 100); } 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) + ')'; obj.style.opacity = (cur + speed) / 100; document.getElementById('txt1').value = obj.style.opacity; } obj.style[attr] = cur + speed + 'px'; } }, 30); } </script> </head> <body> <div id="div1"></div> <input type="text" id="txt1" /> </body> </html>
相关文章推荐
- 使用原生JavaScript实现的EventEmitter
- js实现继承的多种方式
- phantomjs模拟登录
- 使用Filter过滤器,控制不能直接访问JSP文件
- j2e中servlet转发action出现错误但是转发jsp可以
- JSTL判断list的size()大小
- jsp的useBean标签使用
- JavaScript学习笔记——BOM_window对象
- 【JS设计模式】简单工厂模式
- 【JS设计模式】命令模式
- 【JS设计模式】组合模式
- 【JS设计模式】装饰者模式
- 【JS设计模式】工厂方法模式
- JS(数据类型、预解析、闭包、作用域、this)
- JS中的作用域(scope)
- [学习笔记]JavaScript基础--运动应用
- JSP简单的练习-使用JDOM阅读xml文件
- CommonJS规范
- js对象实例化的常见三种方式
- JS - 侧边导航收缩伸展