首页 > 代码库 > 闭包实现(鼠标滑过)当前行高亮显示

闭包实现(鼠标滑过)当前行高亮显示

2024-08-02 20:08:53   218人阅读

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4     <title>新建网页</title> 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6     <meta name="description" content=""/> 7     <meta name="keywords" content=""/> 8  9     <script type="text/javascript">10         window.onload=function(){11             var lis = document.getElementsByTagName(‘li‘);12             for(var i=0; i<lis.length; i++){13 /*                lis[i].onmouseover = function(){14                     lis[i].style.backgroundColor = "lightblue";     //这里面i是四15                 }*/16 17                 //over()获得闭包函数，工调用了4次，这样系统要生成4个函数18                 //函数内部的n分别为：0，1，2，319                 lis[i].onmouseover = over(i);20                 lis[i].onmouseout = out(i);21             }22             function over(n){23                 function fs(){24                     lis[n].style.backgroundColor = "lightblue";25                 }26                 return fs;27             }28             function out(n){29                 function fs(){30                     lis[n].style.backgroundColor = "";31                 }32                 return fs;33             }34 35         }36     </script>37 </head>38 <body>39 <ul>40     <li>刘备</li>41     <li>曹操</li>42     <li>孙权</li>43     <li>董卓</li>44 </ul>45 </body>46 </html>

 

闭包实现(鼠标滑过)当前行高亮显示


联系
我们