javascript多物体运动案例:多物体淡入淡出
javascript多物体运动案例:多物体淡入淡出
任务描述:
补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度。
效果图:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <! DOCTYPE html> < html > < head lang="zh-CN"> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> < title >多个div淡入淡出</ title > < style > div { width: 200px; height: 200px; margin: 20px; float: left; background: red; filter: alpha(opacity=30); opacity: 0.3; } </ style > </ head > < body > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < script type="text/javascript"> //补充代码 </ script > </ body > </ html > |
参考代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | aDiv = document.getElementsByTagName( 'div' ); for ( var i = 0; i < aDiv.length; i++) { aDiv[i].alpha = 30; aDiv[i].onmouseover = function () { startMove( this , 100); } aDiv[i].onmouseout = function () { startMove( this , 30); } } function startMove(obj, iTarget) { clearInterval(obj.timer); obj.timer = setInterval( function () { var speed = (iTarget - obj.alpha) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (obj.alpha == iTarget) { clearInterval(obj.timer); } else { obj.alpha += speed; obj.style.filter = "alpha(opacity=" + obj.alpha + ')' ; obj.style.opacity = obj.alpha / 100; } }, 30) } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步