csdn上当鼠标移动到图片，显示一个层

wangwei1340848 2009-08-05 03:40:10
csdn上当鼠标移动到图片，显示一个层，层里面可以显示用户名，最近发帖的情况等，请问如何实现的呢?
...全文
455 17 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
ljc1234567890 2012-08-24
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 的回复:]

HTML code

<!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-equ……
[/Quote]
你这个怎么只能是第一行有效，其他没效果哦，怎么解决啊？
吐司vivi 2009-08-10
  • 打赏
  • 举报
 回复
给你一个我曾经用过的一个代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script>
function over(obj,div,bol){
var rec=getoffset(obj);
div.style.top=rec[0]+obj.offsetHeight;
if(bol==true)
rec[1] -= 50;
div.style.left=rec[1];
div.style.display="block";
}

function out(div) {
div.style.display="none";
}

function getoffset(e) {
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent) {
t+=e.offsetTop;
l+=e.offsetLeft;
}
var rec = new Array(1);
rec[0] = t;
rec[1] = l;
return rec
}

</script>
<BODY>
<table>
<tr>
<td height="29" colspan="2" align="left" class="STYLE1">
<span class="STYLE5"><a href="javascript:void(0)" onmouseover="over(this,td0)" onmouseout="timer=setTimeout('out(td0)',0)">健康教育的重要性（详解)</a></span>
</td>
</tr>
<tr>
<div id="td0" align=left class="STYLE4" onmouseover="clearTimeout(timer);this.style.display='block'" onmouseout="out(this)" style=" font-size: 14px;background-color:#dee4eb; display:none; width:330px; position:absolute; padding:10px;">
1、因为您对患者提供的合理教育可能有助于减少因处理不当而引起的被投诉的风险；<br/>
2、教育能够加强糖尿病并发症的预防和早期发现；<br/>
3、教育能够最大程度的提高患者的依从性，否则如果患者不能够遵守治疗的各个环节，您将很难评价您推荐的治疗方案是否有效。

</div>
</tr>
</table>
</BODY>
</HTML>
wangwei1340848 2009-08-10
  • 打赏
  • 举报
 回复
没人回答了么
ya270078781 2009-08-06
  • 打赏
  • 举报
 回复 


<!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; charset=utf-8" />

<title>无标题文档</title>

<script src="../jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

	var fa = false;

	$("#baidu").bind("mouseover",function(event){

		$(".out .in").show();

		$(this).css("cursor","pointer");

	});

	$("#baidu").bind("mouseout",function(event){		

//		alert($(".out .in")[0].offsetLeft);

//		if($(".out .in")[0].clientLeft<event.clientX)

		var obj = document.elementFromPoint(event.clientX,event.clientY);

		if(obj.id == "in")

		{

			$(".out .in").hover(function(){

				$(this).show();

			},function(){

				$(this).hide();

			});

		}

		else

		{

			$(".out .in").hide();

		}

	});	

});

</script>

<style>

.out{width:600px; height:450px; position:relative; border: 1px solid red;}

.out img{border:1px solid #0F0;}

.out .in{width:250px; height:150px; position:absolute; left:180px; top:50px; border:1px solid #ccc; display:none}



</style>

</head>



<body>

<div class="out">

	<img id="baidu" src="http://www.baidu.com/img/baidu_logo.gif" />

	<div id="in" class="in">这里面的内容你自己加.距离也自己调.</div>

</div>

</body>

</html>


你要的效果.IE6,IE7,FF测试可用.你自己修改下代码就可以了..
sangshusen_1988 2009-08-06
  • 打赏
  • 举报
 回复
as.mouseover(function(event){
var myevent = event || window.event;
$("#stockInfo").css("left",(myevent.clientX+5)+"px").
css("top",(myevent.clientY+5)+"px");
使用event的clientX和Y控制上边距和左边距。你自己试验下
wangwei1340848 2009-08-06
  • 打赏
  • 举报
 回复
有没有能写个完整的代码示例呢?
yi2219694 2009-08-06
  • 打赏
  • 举报
 回复
路过学习一下
志明与数据 2009-08-06
  • 打赏
  • 举报
 回复
mark
guohouchang 2009-08-06
  • 打赏
  • 举报
 回复
flag 变量是为了提高性能。因为onmouseover onmouseout 比较耗费性能

所以在用户第一鼠标放上去的时候才发送请求。第二次以后都只是显示数据。不加载数据
guohouchang 2009-08-06
  • 打赏
  • 举报
 回复 


<a id="test01x00000000" onmouseover="ImageButton1_Click(event)" onmouseout="Hide();" href="#">Test 鼠标放上就显示</a>



<div id="testx01x000" style="position:absolute;display:none; z-index:0; border-color: inherit; font-size:14px;width:400px; float:left">

			<img src="http://shhq-mossweb03:2019/loading.gif" alt="数据加载中...请稍后"/>数据加载中...请稍等

		</div>












var flag = false;

var x = 0;

var y =0;

var winX = window.screen.height;

var winY = window.screen.width;

function ImageButton1_Click(ev) {

	if(flag)

	{

		x = ev.clientX;

		y = ev.clientY;

		document.getElementById("testx01x000").style.top = winY -(winY -y);

	    document.getElementById("testx01x000").style.left =winX -(winX -y)+400;

	    document.getElementById("testx01x000").style.display = "";

    }else

    {

    	x = ev.clientX;

		y = ev.clientY;

		document.getElementById("testx01x000").style.top = winY -(winY -y);

	    document.getElementById("testx01x000").style.left =winX -(winX -y)+400;

	    document.getElementById("testx01x000").style.display = "";

		ImageButton2_Click();

		flag = true;

    }

}

function ImageButton2_Click() {

	   var id = document.getElementById("test01x00000000ID0EAAA").innerHTML;

       var url = "http://你要请求的地址/Default.jsp?id=" + id ;

    xmlhttpPost(url);

}





function xmlhttpPost(strURL) {

	flag = true;

   

  try{ 

       

       if (window.ActiveXObject)

		{

	    try

	    {

	        xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP.5.0")

	    }

	    catch(e)

	    {

	        try

	        {

	            xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP.4.0")

	        }

	        catch(e)

	        {

	            try

	            {

	                xmlHttpReq  = new ActiveXObject("Msxml2.XMLHTTP")

	            }

	            catch(e)

	            {

	                try{

	                		xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP")

	                }catch(e)

	                {

	                	 alert( "对不起你的浏览器不支持XMLHTTP,原因 "+e.description+ "   请启用ActiveX或升级 "); 

	                }

	            }

	        }

    	}

	}

 

	    xmlHttpReq.open('POST', strURL,true);

	    xmlHttpReq.onreadystatechange = result;

	    xmlHttpReq.send(null);

    } 

    catch(e) 

    { 

          alert( "对不起你的浏览器不支持XMLHTTP, "+e.description+ "   请启用ActiveX或升级 "); 

          flag = false;

    } 

}



function result() {



if (xmlHttpReq.readyState == 3)

        {

        	document.getElementById("testx01x000").innerHTML = "<div><img src=\"http://shhq-mossweb03:2019/loading.gif\" alt=\"数据加载中...请稍后\"/>数据传送中，请稍候……</div>"

        }



    if (xmlHttpReq.readyState == 4 &&xmlHttpReq.status==200) {

        if (xmlHttpReq.responseText != "") {

           var text = xmlHttpReq.responseText;

              document.getElementById("testx01x000").innerHTML =text;

            }

        else {

            alert("数据加载失败");

        }

    }

}





		function Hide()

		{

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

		}


然后在Response.Write（”string“）；
就能直接显示在层上了。
robyjeffding 2009-08-06
  • 打赏
  • 举报
 回复
８楼的用JQuery框架，操作DOM是方便的，学习了！！
wangwei1340848 2009-08-06
  • 打赏
  • 举报
 回复
兄弟，你用了js框架的噶！我要下一个这个框架才能用噶！！
an3gsonnzhy 2009-08-05
  • 打赏
  • 举报
 回复
绝对位置控制下层的显示就可以了
夜雨_Jason 2009-08-05
  • 打赏
  • 举报
 回复
<div style="position:relative;">
<div style="position:absolute;"></div>
</div>
wangwei1340848 2009-08-05
  • 打赏
  • 举报
 回复
思路我知道，但是位置不是很好控制！
ya270078781 2009-08-05
  • 打赏
  • 举报
 回复
一个绝对位置的div先设置不可见.当用户鼠标移动到图片上时,触发一个事件.执行一个方法.在这个方法里,把这个不可见的div显示出来.div里面的信息也随之显示..
鼠标移开的时候做个判断.如果鼠标移开图片.但是在这个div上.那么继续显示.如果鼠标移开图片.也移开了这个div那么,执行一个方法.隐藏div..大概就是这样.很简单的.代码我就不写了.都说的很清楚了..
wangwei1340848 2009-08-05
  • 打赏
  • 举报
 回复
提供类似可用代码者，高分哈！
Excel2013 基本用法（上）
自动填充 对于数字填充 Excel对于处理数据非常方便，比如我们需要输入一个班级的学号，就可以只输入2个学号然后快捷填充就可以完成一个班的学号输入（如下图）。 快捷填充，就是将鼠标移动到选中的单元格边框上当鼠标变成一个黑色十字时，左击，下拉，Excel会自动填充划过的单元格。 Excel是否可以填充任何我想要的数据呢？ 不是的，它只能填充等差数列，等比数列一类有规律的数列。 ...
使用SpringBoot将图片上传至阿里云OSS
阿里云对象存储OSS是一款海量、安全、低成本、高可靠的云存储服务，本文使用SpringBoot整合OSS实现文件上传至OSS功能。
【pygame实现星露谷物语风格游戏】11.砍树
接着就是砍树功能的实现，大体思路就是玩家那边砍树会调用tree这边的函数，相应砍树的结果，先不管player那边怎么写，tree这边的思路就是给树设置一个生命值，写一个damage函数，每次玩家砍树都会调用tree的damage函数，在damage函数里对树的生命值减一，同时如果树上还有苹果，就去掉一个苹果。他是一个字典，key值是树的名字，按照大树和小树来进行明明，value值是一系列的坐标，这个坐标是相对的，是苹果相对于果树的左上角的坐标。逻辑是，首先判断玩家在使用斧子的时候面前是否有树。
jasperreport开发手册--ireport教程
转自：https://blog.csdn.net/frankaqi/article/details/50203877 iReport http://www.jasperreport.net 一、介绍 iReport是一个能够创建复杂报表的开源项目，它100%使用Java语言编写，是目前全球最为流行的开源报表设计器之一。 由于它丰富的图形界面，你能够很快的创建出任何一种你想要的...
提高开机速度（最好的方法集合）
一、软件篇  1、设定虚拟内存  硬盘中有一个很宠大的数据交换文件，它是系统预留给虚拟内存作暂存的地方，很多应用程序都经常会使用到，所以系统需要经常对主存储器作大量的数据存取，因此存取这个档案的速度便构成影响计算机快慢的非常重要因素！一般Windows预设的是由系统自行管理虚拟内
Web 开发

81,122

社区成员

341,744

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章