★效果如下
即通过li空间的事件监控实现相关div的显示和影藏,实现div的动态显示。图 1对应人气收藏,图2对应最受欢迎,这只是分开截图。
图 1
图 2
说明:
html 和css 代码不做说明,主要附上了js的代码
1.相关的思路就是利用dom获取li控件和div控件,div的display设置为none;当lI的onmouseover事件触发时改变div的display状态从而实现动态切换显示。当然,此时html和css部分控制的相应div应该是具有相同属性的,即切换的div的位置,大小,颜色等属性相同。
对应代码://变量区 和 //相关函数
2.然后就是为li添加监控事件,本代码的li由于是float:right,所以默认的选择li设置为oCommendLi[2]而不是oCommendLi[0],就是从 左数和从右数的关系,自己体会吧。
对应代码://控件加载监听
//变量区
var oCommendDiv=document.getElementById("reader_commend");
var oCommendLi=oCommendDiv.getElementsByTagName("li");
var oCommendBookDiv=oCommendDiv.getElementsByTagName("div");
//相关函数
function commendbook_none(){
for(var i=0;i<oCommendLi.length;i++)
{
oCommendLi[i].firstChild.style.border="";
oCommendLi[i].firstChild.style.borderRadius="";
}
for(var i=0;i<oCommendBookDiv.length;i++)
{
oCommendBookDiv[i].style.display="none";
}
}
function commendbook_show(obj1,obj2){
obj1.οnmοuseοver=function(){
commendbook_none();
obj1.firstChild.style.border="2px solid #2B6D33";
obj1.firstChild.style.borderRadius="2px 20px 2px 20px";
obj2.style.display="block";
}
}
//控件加载监听
window.οnlοad=function(){
for(var i=0;i<oCommendLi.length;i++)
{
commendbook_show(oCommendLi[i],oCommendBookDiv[i]);
}
oCommendLi[2].firstChild.style.border="2px solid #2B6D33";
oCommendLi[2].firstChild.style.borderRadius="2px 20px 2px 20px";
oCommendBookDiv[2].style.display="block";
}
}