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

祝端午节快乐！＠＆＠

此效果类似于当当网首页右侧的的7日畅销榜，因为工作需要，编写了一个，现分享出来，恐有不足之处，望提出宝贵意见，共同进步！
此效果的难度，不在js，而在xhtml+css，为了实现代码的最优化和浏览器良好的兼容性，确实花了不少功夫，最后选择使用无序列表ul>li；

js是封装好的，与文档分离开，同一个页面可以实现多处这样的效果，且互不干扰；

1.xhtml

<div id="ranklist">

  <ul class="topcn">

	<li>

    	<span>1</span>

        <p style="display:none;"><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p>

        <div style="display:block;">

          <a href="#"><img src="images/imgs.jpg" title="图片"/></a>

            <a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a>

            <em>日增：666</em>

        </div>

    </li>

	<li>

    	<span>2</span>

        <p><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p>

        <div>

          <a href="#"><img src="images/imgs.jpg" title="图片"/></a>

            <a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a>

            <em>日增：666</em>

        </div>

    </li>

	<li>

    	<span>3</span>

        <p><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p>

        <div>

          <a href="#"><img src="images/imgs.jpg" title="图片"/></a>

            <a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a>

            <em>日增：666</em>

        </div>

    </li>    

  </ul>

</div>

 

2.css

ul,p{ margin:0; padding:0;}

.topcn{width:300px;line-height:27px;font-size:12px;}

.topcn a{font-size:12px;}

.topcn li{border-bottom:#000 1px dotted;display:inline-block;clear:both;}

.topcn span{float: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 div{line-height:19px; padding-bottom:5px; display:none;}

3.js

function 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;i<obj_ele.length;i++){

		if(obj_ele[i].className.indexOf(elename) == -1) continue;

		var objlist=$tag(obj_ele[i],elechild);

		for(j=0;j<objlist.length;j++){

			objlist[j].onmouseover=function(){

				var paris=this.parentNode;

				var list=$tag(paris,elechild);

				for(x=0;x<list.length;x++){

					var thisdiv=$tag(list[x],cur_ele)[0];

					var thisp=$tag(list[x],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鼠标滑过列表文字显

  鼠标滑过列表文字显示图片及详细信息信息信息 日增：666
• 3

  2007-2-10鼠标滑过列表文字显

  鼠标滑过列表文字显示图片及详细信息信息信息 日增：666