首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js兑现鼠标滑动隐藏层或改变背景特效

2012-11-19 
js实现鼠标滑动隐藏层或改变背景特效scriptfunction c_list(lid){//参数是当前节点对象var lislid.pare

js实现鼠标滑动隐藏层或改变背景特效
<script>function c_list(lid){     //参数是当前节点对象   var lis=lid.parentNode.childNodes; //获取当前节点的父节点,再通过父节点获取当前节点的兄弟节点数组(父节点的子节点)   for(var i=0;i<lis.length;i++){   //循环修改兄弟节点的className     if(lis[i].nodeType != 1) continue; //为了兼容火狐,火狐会把空格也当成一个节点     lis[i].className='mouse_out';  }   lid.className='mouse_on';   //单独设置当前节点的className}</script> 上文中红色字体段是后来加的,因为后来在用同样方法写一个效果的时候发现火狐不兼容,火狐会把空格也当成一个节点解决方法1:if(lis[i].nodeType != 1) continue;屏蔽掉nodeType不是1(元素节点)的节点解决方法2:if(lis[i].nodeName =="#text") continue;屏蔽文本节点 此函数使用是不用写id,下面附上html代码<ul> <li class=mouse_on   onmousemove="c_list(this)">  <p class="p1">这是p1内容 LI1</p>  <p class="p2">这是p2内容 LI1</p> </li> <li onmousemove="c_list(this)">  <p class="p1">这是p1内容 LI2</p>  <p class="p2">这是p2内容 LI2</p> </li> <li onmousemove="c_list(this)">  <p class="p1">这是p1内容 LI3</p>  <p class="p2">这是p2内容 LI3</p> </li> <li onmousemove="c_list(this)">  <p class="p1">这是p1内容 LI4</p>  <p class="p2">这是p2内容 LI4</p> </li></ul>
这样就可以通过css控制p1  p2的内容样式了,比如默认P2隐藏,当鼠标滑过p1,则p2显示....CSS代码就懒得写了.........原文:http://www.software8.co/wzjs/Javascript/1037.html测试火狐,ie,谷歌通用

热点排行
Bad Request.