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

 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,3
19                 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>
时间: 2024-08-03 16:19:58

闭包实现(鼠标滑过)当前行高亮显示的相关文章

jquery插件之表格隔行变色并鼠标滑过高亮显示

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

JQuery实现鼠标滑过显示导航下拉列表

我们往往是将同一级目录下的栏目先隐藏起来,当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表,下面为大家讲解下是如何实现的,当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 <html> <h

酷炫的鼠标滑过添加遮罩层效果

今天,没错又是今天,今天做的事情还真是多呢~还修了洗衣机,貌似除了写代码不行,样样都行了呢~ 好了,言归正传.今天在浏览一个网页时,鼠标滑过它的图片,出现了一种我感觉很酷炫的效果.像这样: 自己感受下~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&

鼠标滑过图片变暗文字链接滑出jQuery特效

效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" /> &l

利用jQuery实现,蒙板随鼠标滑入滑出

今天学习了jQuery的一些知识点,做了一个练习:实现蒙板随鼠标移动,从元素的四个方向滑入滑出.如图: jQuery知识点: 定位:获取相对于父元素的偏移量           position().left           position().top 获取元素相对于当前窗口的偏移量           offset().left           offset().top 步骤: 1.创建父元素.当前对象.蒙板 代码如下: <div class="wrap">  

[Axure RP] – 鼠标滑入按钮时自动下拉表单的设计示例

转:http://blog.qdac.cc/?p=2197 Axure RP 是个好东东呀,大大方便了程序员与客户之间的前期调研时的交流.不过有一些控制并没有鼠标移入和移出的操作,比如 HTML 按钮,为了模拟鼠标移入或移出时动态显示下拉列表啥的效果,我们使用了动态面板来做处理.当然了,条条大路通罗马,这条大路也许不是最佳的,仅供参考. 1.拖一个动态面板到编辑区: 2.双击添加一个状态,我们命名为“正常”,以代表鼠标没有滑过时的状态: 3.双击“正常”状态,进入正常状态编辑页面: 4.在动态面

蜗牛—JavaScript学习之鼠标滑过与离开

鼠标划过,图片会变,离开又回复到初识状态 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http

onmouseover 事件-鼠标滑过

onmouseover 鼠标滑过事件 <script> function con(){ alert("xxx") } </script> <body> <button onmouseover='con()'>划过</button> </body>

鼠标滑过触发拉窗式JS效果

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>鼠标滑过触发拉窗式JS效果</title> <link rel="stylesheet" href="