鼠标滑过列表文字显示图片及详细信息信息信息 visual studio 08

最新推荐文章于 2018-07-21 12:30:05 发布

kingdompk722

最新推荐文章于 2018-07-21 12:30:05 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签： div function float xhtml list class

本文链接：https://blog.csdn.net/kingdompk722/article/details/6221084

版权

jquery 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

1<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; " />
    <title>提示框效果</title>
    <style type="text/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;}

    </style>

        <script type="text/javascript">

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：是显示的详细信息区域；

</script>
</head>
<body >
<div id="ranklist">

<li>

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

<a href="#">这是我想要的皮带啊</a>

</div>

</li>

<li>

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

<div>

<a href="#">我买个送人，对象呢？</a>

</div>

</li>

<li>

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

<div>

<a href="#">哈哈，我看这女人包干啥</a>

</div>

</li>

</ul>

</div>

</body>
</html>

kingdompk722

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标滑过列表文字显示图片及详细信息信息信息 visual studio 08

12007-2-10鼠标滑过列表文字显鼠标滑过列表文字显示图片及详细信息信息信息日增：55522008-2-10鼠标滑过列表文字显鼠标滑过列表文字显示图片及详细信息信息信息日增：66632009-2-10鼠标滑过列表文字显鼠标滑过列表文字显示图片及详细信息月增：ni ma l g
复制链接

扫一扫