javascript批量注册事件处理函数代码实例
分类:实例代码
本章节分享一段代码实例,它实现了批量注册事件处理函数的功能。
此代码实现了为li元素批量注册事件处理函数,实现了简单的动画效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> body, div{ margin: 0; padding: 0; font-size: 12px; } ul { list-style: none; } .odiv { position: relative; } .odiv ul li { width: 200px; height: 100px; background: yellow; margin-bottom: 20px; } </style> <script> window.onload = function () { var olist = document.getElementsByTagName('li'); for (var index = 0; index < olist.length; index++) { olist[index].onmouseover = function () { startmov(this, 400); }; olist[index].onmouseleave = function () { startmov(this, 200); }; olist[index].timer = null; } function startmov(obj, itarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var speed = 0; speed = (itarget - obj.offsetWidth) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (obj.offsetWidth == itarget) { clearInterval(obj.timer); } else { obj.style.width = obj.offsetWidth + speed + 'px'; } }, 30); } } </script> </head> <body> <div id="odiv" class="odiv"> <ul> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
上面的代码实现了我们的要求,这里具体就不介绍了。
原理非常的简单,就是使用for循环挨个为li元素注册事件处理函数。
实现过程建议参阅具有缓冲效果的侧栏展开客服系统一章节。
网站出售中,有意者加微信:javadudu