js实现鼠标滑入滑出背景透明度改变
2015-12-20 23:36
716 查看
js实现鼠标滑入滑出背景透明度改变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分享</title> </head> <style type="text/css"> body{padding:0;margin:0;} #n_content{width:200px;height:200px;background:red;opacity:0.3;filter:Alpha(opacity=30);} </style> <body> <div id="n_content"></div> <script type="text/javascript"> window.onload = function(){ var odiv = document.getElementById("n_content"); odiv.onmouseover = function(){ startMove(100); } odiv.onmouseout = function(){ startMove(30); } var timer = null; var alpha = 30; function startMove(iTarget){ var odiv = document.getElementById("n_content"); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha>iTarget){ speed = -10; }else{ speed = 10; } if(alpha==iTarget){ clearInterval(timer); }else{ alpha+=speed; odiv.style.filter = 'alpha(opacity='+ alpha +')'; odiv.style.opacity= alpha/100; } },30); }; } </script> </body> </html>
相关文章推荐
- 理解js中的原型链,prototype与__proto__的关系
- javascript的函数属性和方法
- JS面向对象学习
- JavaScript Function类型 小抄
- JavaScript数组
- Javascript实现继承的理解
- js oop 封装
- js oop 继承
- JS常用方法函数
- js中冒号的特殊作用
- 有关arguments与js入门
- JS实现密码加密
- jsp页面清除缓存
- jsp页面清除缓存
- 基本概念小结
- js页面之间传参2
- JavaScript 浮点数及运算精度调整总结,浮点数计算不准确怎么办
- JSON.parse()和JSON.stringify()
- Gson解析复杂的json数据
- JavaScript DOM初识