JS多物体宽度运动案例
任务
对于每一个Div区块,鼠标移入,宽度逐渐变宽,最宽值为400px,当鼠标移除时,宽度逐渐减小,最小值为100px。
任务提示:
(1)多物体运动的定时器需要需要每个物体上同时最多只能开一个定时器,避免多定时器干扰。
(2)每个物体都要有单独的定时器,避免公用定时器导致相互掣肘。
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 | <! DOCTYPE html> < html lang="zh-CN"> < head > < meta charset="UTF-8"> < title >JS小案例:多物体变宽</ title > < style > body { height: 2000px; margin: 0px; } div { width: 100px; height: 50px; background: red; margin: 10px; } </ style > < script > //补充代码 </ script > </ head > < body > < div ></ div > < div ></ div > < div ></ div > </ 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 40 41 42 43 44 45 46 | /* 鼠标移入,宽度变为400px,鼠标移出,宽度恢复为100px */ function changeWidth(obj, iTarget) { // 开始定时器前清除该物体上的定时器,确保每次物体上作用的只有一个定时器 clearInterval(obj.timer); // 开启定时器,为物体的DOM对象添加自定义的timer属性,属性值为定时器返回ID,这样可以保证每个物体上的定时器返回ID不同,避免相互之间干扰。 obj.timer = setInterval( function () { var speed = (iTarget - obj.offsetWidth) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (Math.abs(iTarget - obj.offsetWidth) <= speed) { obj.style.width = iTarget + 'px' ; clearInterval(obj.timer); } else { obj.style.width = obj.offsetWidth + speed + 'px' ; } }, 30) } window.onload = function () { var aDiv = document.getElementsByTagName( 'div' ); for ( var i = 0; i < aDiv.length; i++) { aDiv[i].onmouseover = function () { changeWidth( this , 400); } aDiv[i].onmouseout = function () { changeWidth( this , 100); } } } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步