想要一个效果

bamnm555 2010-06-10 10:10:33

想要一个跟这个差不多的效果，因为这个效果没有下载了。

...全文

80 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

passself 2010-06-10

打赏
举报

这个就是鼠标移上去的时候显示对应得图片，就可以了，再定位在名字的右侧显示

xk1126 2010-06-10

打赏
举报



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

<style type="text/css">

table {

	border:1 solid black;

}

</style>



<SCRIPT LANGUAGE="JavaScript">

<!--

	function showClose() {

		document.getElementById("adv1").style.display = "none";

	}



	function showOpen() {

		document.getElementById("adv1").style.display = "block";

	}

//-->

</SCRIPT>

 </HEAD>



 <BODY>

 <A href=""  onmouseover="showOpen()" onmouseout="showClose()">House.Greqory</A>

 <div id="adv1" style="position:absolute;display:none;top:10px;left:px;">

	<table>

		<tr>

			<td rowspan="9"><img src=""></td>

			<td>Address</td>

			<td>253 Wieteres street prietnt,HN 08540</td>

		</tr>

		<tr>

			<td>Family Role</td>

			<td>Adult</td>

		</tr>

		<tr>

			<td>Email</td>

			<td><A href="">house@example.org</A></td>

		</tr>

		<tr>

			<td>Member Status</td>

			<td>Member</td>

		</tr>

		<tr>

			<td>Age</td>

			<td>48</td>

		</tr>

		<tr>

			<td>Gender</td>

			<td>Male</td>

		</tr>

		<tr>

			<td>Marilte stutar</td>

			<td>single</td>

		</tr>

		<tr>

			<td>Main/Hone</td>

			<td>(555)5555-1234</td>

		</tr>

		<tr>

			<td>cell</td>

			<td>(555)5555-4321</td>

		</tr>

	</table>

 </div>

 </BODY>

</HTML>

浪尖赏花 2010-06-10

打赏
举报

跟CSDN帖子左侧的头像上的效果差不多，LZ可以扒下来

bamnm555 2010-06-10

打赏
举报

不知道有没有现成的。

xk1126 2010-06-10

打赏
举报

我给你做个！~类似的！~

孟子E章 2010-06-10

打赏
举报

这不就是onmoueover事件显示一个层吗？自己写不不难吧

hoojo 2010-06-10

打赏
举报

就一个div，鼠标放上去显示，离开就隐藏起来

zyzy15 2010-06-10

打赏
举报

取坐标那里改一下



		//取坐标

		var x, y;

		//alert(window.event)

		if (window.event) {

			x = event.clientX; //主要是这里由offset改为client

			y= event.clientY; //主要是这里由offset改为client

		}

		//alert(x+"\n"+y);

		adv1.style.top = y;

		adv1.style.left = parseInt(x+50,10);

		adv1.style.display = "block";

zyzy15 2010-06-10

打赏
举报



<style> 

th,td {

	height:25px;

	font-size:12px;

	font-family:Arial;

}

.db { border-collapse:collapse;} 

.db tr{	background-color:expression('#F8F8F8,#EFEFEF'.split(',')[rowIndex%2]); } 

</style> 



<SCRIPT LANGUAGE="JavaScript">

<!--

var arr_title = ["Address","Family Role","Email","Member Status","Age","Gender","Marilte stutar","Main/Hone","cell","pic"];

var arr = new Array();

arr[0] = ["","","","","25","Female","","","","http://avatar.profile.csdn.net/0/9/3/2_bamnm555.jpg"];

arr[1] = ["253 Wieteres street prietnt,HN 08540","Adult","house@example.org","Member","48","Male","single","(555)5555-1234","(555)5555-4321","http://avatar.profile.csdn.net/5/8/8/2_xk1126.jpg"];

var lastIndx;

    function showOpen(indx,event) {

        var adv1 = document.getElementById("adv1");

		if (indx != lastIndx) {

			adv1.innerHTML = "";

			var tab = document.createElement("table");

			tab.style.margin = "5px";

			for (var i=0; i<arr[indx].length-1; i++) {

				var tr = tab.insertRow(-1);

				if (i==0){ //pic

					var td = tr.insertCell(-1);

					td.rowSpan = "9";

					td.align = "center";

					td.width = "150px";

					var img = document.createElement("img");

					img.src = arr[indx][arr[indx].length-1];

					td.appendChild(img);

				}

				var td = tr.insertCell(-1);

				td.style.verticalAlign = "top";

				td.style.height = "12px";

				td.innerHTML = "<b>"+ arr_title[i] +"</b>";

				var td = tr.insertCell(-1);

				td.width = "200px";

				td.style.height = "12px";

				td.style.verticalAlign = "top";

				if (i==2) {	//email

					td.innerHTML = "<a href='mailto:"+ arr[indx][i] +"'>"+ arr[indx][i] +"</a>";

				}

				else td.innerHTML = arr[indx][i];

			}

			adv1.appendChild(tab);

			lastIndx = indx;

		}

		var x, y;

		//alert(window.event)

		if (window.event) {

			x = event.offsetX;

			y= event.offsetY;

		}

		//alert(x+"\n"+y);

		adv1.style.top = parseInt(y+50,10);

		adv1.style.left = parseInt(x+50,10);

		adv1.style.display = "block";

    }

    function showClose() {

        document.getElementById("adv1").style.display = "none";

    }

//-->

</SCRIPT>



 <TABLE class="db" width="300px">

 <TR style="border-bottom:1px solid black;">

	<TH style="border-bottom:1px solid black;">Name</TH>

	<TH style="border-bottom:1px solid black;">Gender</TH>

	<TH style="border-bottom:1px solid black;">Age</TH>

 </TR>

 <TR>

	<TD><A href="" onmouseover="showOpen(0,event)" onmouseout="showClose()"><B>House.Devon</B></A></TD>

	<TD>F</TD>

	<TD>25</TD>

 </TR>

 <TR>

	<TD><A href="" onmouseover="showOpen(1,event)" onmouseout="showClose()"><B>House.Greqory</B></A></TD>

	<TD>M</TD>

	<TD>48</TD>

 </TR>

 </TABLE>

 

 <div id="adv1" style="background:white; border:2px solid #CCEEEE; position:absolute;display:none;">

 </div>