js 隔行变色 鼠标触发变色 event事件 keyCode键盘事件_liuhexing_新浪博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js 隔行变色 鼠标触发变色 键盘事件（上、下）变色</title>
<style type="text/css">
ul li{ width:300px;padding:1px;list-style: none;border-bottom: 1px solid #23801C;cursor:hand;}
</style>
<script type="text/javascript">
vli=document.getElementsByTagName('li');
function initUl(){  
for (var i=0;i<vli.length;i++){    
   vli[i].setAttribute("now","false");    
}
bg();
}
function bg(){
for (var i=0;i<vli.length;i++){
   if(vli[i].getAttribute("now")=="false"){
    if(i%2==0){
     vli[i].style.background="#FFFFFF";
      //alert("aaa")
    }    
    else{
     vli[i].style.background="#CCCCCC";
     }
   }
   else if(vli[i].getAttribute("now")=="true"){
    vli[i].style.background = "#6d9eeb"
   }
}
}

   function addEvent(){
        for(var i=0;i<vli.length;i++)
        {
            vli[i].onmouseover = function(){
      for (var i=0;i<vli.length;i++){    
      vli[i].setAttribute("now","false");    
     }
      this.setAttribute("now","true") ;
      bg();
            }
            vli[i].onmouseout = function(){
     for (var i=0;i<vli.length;i++){    
     vli[i].setAttribute("now","false");    
}
     this.setAttribute("now","false");
     bg();
            }
        }
}
document.onkeydown = keyDown;
function keyDown(evn){
if(window.event){
   evn=window.event;
}
//上键
if(evn.keyCode == 38){
   for(var j=0;j<vli.length;j++){
      if(vli[j].getAttribute("now") == "true"){    
     if(j == 0){
     alert('已经是{dy}行!');
     vli[j].setAttribute("now","true");
       }else {
      vli[j].setAttribute("now","false");
      vli[j != 0 ? (j - 1) : j].setAttribute("now","true");
     }
   
    }
   }
   bg();
}
//下键
if(evn.keyCode == 40){
   for(var j = vli.length - 1; j > -1; j--){
    if(vli[j].getAttribute("now") == "true"){  
     if(j == vli.length - 1){
      alert('已经是{zh1}一行!');
      vli[j].getAttributenow = "true";    
     }else {
      vli[j].setAttribute("now","false");
      vli[j >= 0 ? (j + 1) : j].setAttribute("now","true");
     }
    }     
   }
   bg();
}
}
window.onload = function(){
   initUl();
   addEvent();
    }
</script>
</head>
<body>
<ul>
<li>第1列</li>
<li>第2列</li>
<li>第3列</li>
<li>第4列</li>
<li>第5列</li>
<li>第6列</li>
<li>第7列</li>
<li>第8列</li>
<li>第9列</li>
<li>第10列</li>
<li>第11列</li>
<li>第12列</li>
<li>第13列</li>
<li>第14列</li>
<li>第15列</li>
<li>第16列</li>
<li>第17列</li>
</ul>
</body>
</html>

 

已投稿到：
郑重声明：资讯 【js 隔行变色 鼠标触发变色 event事件 keyCode键盘事件_liuhexing_新浪博客】由 发布，版权归原作者及其所在单位，其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实，请读者仅作参考，并请自行核实相关内容。若本文有侵犯到您的版权， 请你提供相关证明及申请并与我们联系（qiyeku # qq.com）或【在线投诉】，我们审核后将会尽快处理。
—— 相关资讯 ——
2022年中国绘本行业市场运营格局及发展趋势预测报告
2022年中国绘本行业市场运营格局及发展趋势预测报告
2022/9/15
SMS非织布生产设备_SMS非织布生产线批发-北京见奇电子机械(多图)
SMS非织布生产设备_SMS非织布生产线批发-北京见奇电子机械(多图)
2019/5/11
十堰回收TOREX特瑞仕偏冷门芯片
十堰回收TOREX特瑞仕偏冷门芯片
2022/8/4
龙岩市有看肺癌的好医院吗
龙岩市有看肺癌的好医院吗
2015/10/29
u88营销站群软件 Q5738538 陈默外推
u88营销站群软件 Q5738538 陈默外推
2017/1/15
通风管道设备加工：新品通风管道市场价格
通风管道设备加工：新品通风管道市场价格
1900/1/1
知名的工业门厂房大门安装维修公司 |自贡工业门维修价格
知名的工业门厂房大门安装维修公司 |自贡工业门维修价格
2016/6/21
什么xx精油好_极瘦美体网
什么xx精油好_极瘦美体网
2015/3/15
火腿鸡茸玉米汤快捷又营养_pan_le的空间_百度空间
火腿鸡茸玉米汤快捷又营养_pan_le的空间_百度空间
2010/5/21
三本娃娃手工书20100129 - lily的日志- 网易博客
三本娃娃手工书20100129 - lily的日志- 网易博客
2010/1/29
zz电烙铁的使用
zz电烙铁的使用
2010/1/9
纯聚丙烯制作的一次性发泡塑料餐盒成为市场主流_废旧塑料回收价格_百度空间
纯聚丙烯制作的一次性发泡塑料餐盒成为市场主流_废旧塑料回收价格_百度空间
2010/3/17
29种免费推广的办法
29种免费推广的办法
2010/4/3
xx牙痛,牙病的100多种方法大集合_好好学习，天天向上！_百度空间
xx牙痛,牙病的100多种方法大集合_好好学习，天天向上！_百度空间
2010/4/12
安徽：铜陵县引种白茶成功_铁观音,安溪铁观音,茶叶知识,茶叶文化,绿茶 ...
安徽：铜陵县引种白茶成功_铁观音,安溪铁观音,茶叶知识,茶叶文化,绿茶 ...
2010/4/23
比嘉地板招商优势盘点阿里巴巴jkdiban2009的博客BLOG
比嘉地板招商优势盘点阿里巴巴jkdiban2009的博客BLOG
2010/5/17
一位台湾校长震惊所有中国人的演讲_龙回仁_新浪博客
一位台湾校长震惊所有中国人的演讲_龙回仁_新浪博客
2010/6/9
球磨机局部隔声罩的设计和应用|齿轮类零件及减(增)速机设计制造及应用 ...
球磨机局部隔声罩的设计和应用|齿轮类零件及减(增)速机设计制造及应用 ...
2010/6/10
冲锋衣品牌排名
冲锋衣品牌排名
2013/4/6
哪种去眼纹眼霜好
哪种去眼纹眼霜好
2015/2/20