怎么实现CSDN上鼠标放在用户上会弹出页面的效果
日期：2014-05-18 浏览次数：20412 次
如何实现CSDN上鼠标放在用户上会弹出页面的效果？
如题，我想在里面显示一张图片，不晓得这种效果是怎么实现的？
------解决方案--------------------
就是一个div
------解决方案--------------------
个人猜想,隐藏DIV
onMouseOn => div.style.display = XXX;
------解决方案--------------------
这问题，就不要麻烦老孟了吧。就是div+css+js实现，div装载内容，css控制效果，js控制div显示于隐藏以及在显示位置。
------解决方案--------------------
给div设置样式
参考
.popupWindow
{
position:absolute;
left:100px;
top:50px;
width:400px;
border:solid 1px black;
padding:10px;
background-color:white;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=#cccccc);
display:none;
}
------解决方案--------------------
可以参考着自己做下
------解决方案--------------------
猜测啊
asp:UpdatePanel控制内容
如题，我想在里面显示一张图片，不晓得这种效果是怎么实现的？
------解决方案--------------------
就是一个div
------解决方案--------------------
个人猜想,隐藏DIV
onMouseOn => div.style.display = XXX;
------解决方案--------------------
这问题，就不要麻烦老孟了吧。就是div+css+js实现，div装载内容，css控制效果，js控制div显示于隐藏以及在显示位置。
------解决方案--------------------
给div设置样式
参考
.popupWindow
{
position:absolute;
left:100px;
top:50px;
width:400px;
border:solid 1px black;
padding:10px;
background-color:white;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=#cccccc);
display:none;
}
------解决方案--------------------
可以参考着自己做下
------解决方案--------------------
猜测啊
asp:UpdatePanel控制内容
- HTML code
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanelOnline">
<ProgressTemplate>
<img src="update1.gif" />正在刷新，请稍候...
</ProgressTemplate>
</asp:UpdateProgress>
------解决方案--------------------
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="test.jpg" style="width: 70px; height: 94px" onmouseover="show(this)" onmouseout="hide(this)"/>
<div id="enlarge_images" style="position: absolute; z-index:2; height:100px; width:80px;"></div>
<script type="text/javascript" language="javascript">
function show(_this) {
document.getElementById("enlarge_images").innerHTML = "<img src='" + _this.src + "' >";
}
function hide(_this) {
document.getElementById("enlarge_images").innerHTML = "";
}
function move_layer(event){
event = event || window.event;
enlarge_images.style.left=event.clientX+document.body.scrollLeft+10;
enlarge_images.style.top=event.clientY+document.body.scrollTop+10;
}
document.onmousemove =move_layer;
</script>
</div>
</form>
</body>
</html>
------解决方案--------------------
div+css+js可以实现
------解决方案--------------------
------解决方案--------------------
http://topic.csdn.net/u/20071218/15/4c1d75ce-85dc-4802-9488-6d3a2cf95448.html
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
