js动画效果
2016-04-19 22:13
471 查看
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>动画效果</title> </head> <style type="text/css"> .odiv{width:200px;height: 100px;background: green;margin-top:20px;border: 5px solid blue;filter:alpha(opacity:30);opacity: 0.3;} </style> <body> <div class="odiv" id="odiv"></div> <div class="odiv" id="odiv2"></div> <div class="odiv" id="odiv3"></div> </body> <script type="text/javascript"> window.onload=function(){ var div=document.getElementById('odiv'); var divs=document.getElementsByTagName('div'); for(var i=0;i<divs.length;i++){ divs[i].timer=null; divs[i].onmouseover=function(){ move(divs[0],{'opacity':100,'width':400},function(){ move(divs[0],{'height':300,'width':600}) }) } divs[i].onmouseout=function(){ move(divs[0],{'opacity':30,'width':200},function(){ move(divs[0],{'height':100,'width':200}) }); } } function move(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag=true; for(var attr in json){ var icr=0; if(attr=='opacity'){ icr=Math.round(parseFloat(getstyle(obj,attr))*100); }else{ icr=parseInt(getstyle(obj,attr)); } var sped=(json[attr]-icr)/8; sped=sped>0 ? Math.ceil(sped):Math.floor(sped); if(icr!=json[attr]){ flag=false; } if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icr+sped)+')'; obj.style.opacity=(icr+sped)/100; } else{ obj.style[attr]=icr+sped+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30); } //获取不带边框的高 function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } } </script> </html>
相关文章推荐
- js弹出框
- js中 replace() 全部替换实例
- 一起学libcef--让你的cef执行js代码
- 一起学libcef--让你的cef执行js代码
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
- scrollWidth、clientWidth与offsetWidth的区别
- 原生js之道——原生js编写类选择器
- [原创]Windows下Google V8 javascript引擎编译
- JSP重定向与转发的区别
- JavaScript之内置对象、字符串API
- JS断点调试心得(转)
- JavaScript uploadify插件上传文件问题
- JavaScript学习笔记
- JavaScript模块化规范
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
- 用JavaScript动态加载CSS和JS文件
- JS实现父页面跳转、iframe实现整页面跳转
- JavaScript基础知识2
- javaScript数组循环删除
- javascript中的对象、类学习(转) 好文章,看明白了很多概念