JavaScript 高级课程之缓冲收缩(多个DIV),谈入谈出
2016-06-08 14:20
357 查看
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript 高级课程之缓冲收缩(多个DIV),谈入谈出</title> <style> div { width:100px ; height:100px; margin-top:10px; background-color:#FF0004; filter:alpha(opacity:10); opacity:0.1;} </style> <script> window.onload = function(){ var aDiv = document.getElementsByTagName('div'); for(var i=0; i<aDiv.length; i++){ aDiv[i].alpha = 10; // 每个DIV设置透明度 aDiv[i].Timer = null; // 每个DIV设置定时器 aDiv[i].onmouseover = function(){ startMove(this,100); } aDiv[i].onmouseout = function(){ startMove(this,10); } } } function startMove(obj, iT){ clearInterval(obj.Timer); obj.Timer = setInterval(function(){ var iSeppd = (iT - obj.alpha)/8; iSeppd = iSeppd>0?Math.ceil(iSeppd):Math.floor(iSeppd); if(obj.alpha == iT){ clearInterval(obj.Timer); }else{ obj.alpha += iSeppd; obj.style.filter = 'alpha(opacity:'+obj.alpha+')'; obj.style.opacity = obj.alpha/100; obj.innerHTML = obj.alpha; } },20) } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
相关文章推荐
- JavaScript 高级课程之缓冲收缩(多个DIV),Math.ceil()向上取整,Math.floor()向下取整
- JavaScript 高级课程之缓冲收缩DIV,Math.ceil()向上取整,Math.floor()向下取整
- JavaScript 滚动条示例,控制居中document.documentElement.scrollTop,document.body.scrollTop,oDiv.offsetHeight
- JavaScript 三种创建对象的方法
- JavaScript 高级课程之淡出淡入CSS filter等属性
- OC之JSON数据解析
- JavaScript 高级课程之分享setInterval(),clearInterval(),onmouseover,onmouseout应用(2_自动判断正负)
- JavaScript 高级课程之分享setInterval(),clearInterval(),onmouseover,onmouseout应用
- JavaScript 高级课程之定时器setInterval,clearInterval
- JavaScript onmousewheel鼠标滚轮示例
- JavaScript Cookie的使用实例
- javascript 使用btoa和atob来进行Base64转码和解码
- JavaScript Cookie的使用
- JavaScript onmousedown选择元素,onmousemove拖动元素,onmouseup松开鼠标,磁性吸附效果示例
- 使用Jsoup解析html网页
- javascript 执行环境,变量对象,作用域链
- JavaScript oncontextmenu鼠标右键菜单触发 自定义右键菜单示例
- JavaScript onkeydown键盘按下时触发,ev.keyCode按下的键值
- 浅析JSONP技术原理及实现
- JavaScript 冒泡原理及示例