[javascript]鼠标滑过列表文字显示图片及详细信息

javascript鼠标滑过列表文字显示图片及详细信息祝端午节快乐！此效果类似于当当网首页右侧的的7日畅销榜，因为工作需要，编写了一个，现分享出来，恐有不足之处，望提出宝贵意见，共同进步！此效果的难度，不在js，而在xhtml+css，为了实现代码的最优化和浏览器良好的兼容性，确实花了不少功夫，最后选择使用无序列表ulli；js是封装好的，与文档分离开，同一个页面可以实现多处这样的效果，且互不干扰；1.xhtml 1 2007-2-10鼠标滑过列表文字显 鼠标滑过列表文字显示图片及详细信息信息信息 日增：666 2 2007-2-10鼠标滑过列表文字显 鼠标滑过列表文字显示图片及详细信息信息信息 日增：666 3 2007-2-10鼠标滑过列表文字显 鼠标滑过列表文字显示图片及详细信息信息信息 日增：666 2.cssul,p margin:0; padding:0;.topcnwidth:300px;line-height:27px;font-size:12px;.topcn afont-size:12px;.topcn liborder-bottom:#000 1px dotted;display:inline-block;clear:both;.topcn spanfloat:left;width:17px;height:15px;line-height:15px;text-align:center;font-size:9px;font-family: Verdana, Geneva, sans-serif;margin:5px 5px 0 0;background-color:#99C;.topcn p,.topcn div float:left;width:278px;.topcn p code float:right;color:#9f9fa1;.topcn img width:67px;height:50px;border:#000 1px solid;float:left;margin:3px 10px 0 0;display:inline; background-color: #CCF;.topcn em display:block;color:#919b9d;.topcn divline-height:19px; padding-bottom:5px; display:none;3.jsfunction ranklist(id,ele,elename,elechild,start_ele,cur_ele) var obj_id=document.getElementById(id); var obj_ele=$tag(obj_id,ele); for(i=0;iobj_ele.length;i+) if(obj_elei.className.indexOf(elename) = -1) continue; var objlist=$tag(obj_elei,elechild); for(j=0;jobjlist.length;j+) objlistj.onmouseover=function() var paris=this.parentNode; var list=$tag(paris,elechild); for(x=0;xlist.length;x+) var thisdiv=$tag(listx,cur_ele)0; var thisp=$tag(listx,start_ele)0; thisdiv.style.display=none; thisp.style.display=block; var start=$tag(this,start_ele)0; start.style.display=none; var cur=$tag(this,cur_ele)0; cur.style.display=block; function $tag(id,tag)return id.getElementsByTagName(tag);setTimeout(ranklist(ranklist,ul,topcn,li,p,div),0);/*参数解释：ranklist:为了缩小函数在文档中搜寻对象的范围，给其设置了一个id参数；ul：在搜寻范围内遍历ul元素列表；这是ele参数，为了排除与效果无关的ul元素；给其添加了类topcn，这是elename参数；在指定的ul中遍历li列表元素；鼠标经过li元素会有相应的事件产生；p:为文字列表行；div：是显示的详细信息区域；*/效果展示 1 2007-2-10鼠标滑过列表文字显鼠标滑过列表文字显示图片及详细信息信息信息 日增：666 2 2007-2-10鼠标滑过列表文字显鼠标滑过列表文字显示图片及详细信息信息信息 日增：666 3 2007-2-10鼠标滑过列表文字显鼠标滑过列表文字显示图片及详细信息信息信息 日增：666 1 2007-2-10鼠标滑过列表文字显鼠标滑过列表文字显示图片及详细信息信息信息 日增：666 2 2007-2-10鼠标滑过