鼠标划过用户名时在鼠标右下角显示div展示用户资料_ASP.NET技巧_动态网站制作指南
鼠标划过用户名时在鼠标右下角显示div展示用户资料
来源：人气：1381
鼠标划过用户名时在鼠标右下角显示div展示用户资料 最近做一个网站论坛，为了方便会员之间相互了解，又不想再做一个页面展示用户资料，就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果，这里要注意的该方法不是给每个用户名的旁边都绑定一个div，当鼠标经过用户名时显示，鼠标离开时隐藏，如果这样做网页加载就太耗时将了。但以前没做过，于是便想实现这个功能。经过一天的学习和查阅，了解了个大概，最终实现了这个效果。下面列一下难点和实现方法： 一、难点 难点无非就三大块，一个是div的定位，这个是该效果的主要难点，之前在网上找了很多定位的代码，但还是在网页中不能精确定位，后来经过自己的一些改进，还算完美；二个是通过异步加载数据，这个对于有一定开发经验的老手来说应该算不了什么；第三个就是要用到两个js属性onmouver和onmouseout，即鼠标经过和鼠标离开。 二、实现步骤 1.首先设计好要显示用户资料的div的样式, 这里要注意的该方法不是给每个用户名的旁边都绑定一个div，当鼠标经过时显示，鼠标离开时隐藏，网页里就一个显示信息的div，哪里需要显示时就定位在哪里，这要就需要把该div的定位方式设置为绝对定位。 html代码： 1
&div class="blockdiv" id="blockdiv"& 2
&div class="pic"& 3
&img src="../../Users/images/搜狗截图33.png" id="imguserhead" /& 4
&div class="box"& 6
&table width="220" border="0" style="overflow: text-overflow: white-space: nowrap"& 7
&td style="width: 70"&用户名：&/td& 9
&label id="lblusername"&&/label&11
&td&真实姓名：&/td&15
&label id="lblrealname"&&/label&17
&td&性别：&/td&21
&label id="sex"&&/label&23
&td&所属地区：&/td&27
&label id="lbladdress"&&/label&29
&td&邮箱：&/td&33
&label id="lblemall"&&/label&35
&/table&38
&div style="text-align: color: line-height: 40 height: 30 display:" id="messagediv "&正在加载中...&/div&39
&/div&40 41
&/div&View Code 相应代码 1
#blockdiv{ 2
width:380 3
height:160 4
display: 6
border: 1px solid #
position: z-index: 1; opacity: 0.1; background: white 7
width:10010
height:10011
border:1px solid #12
border-radius:10 13
float: margin:10 14
overflow:15
width:24018
height:14019
margin:10px 0 10px 1020
overflow:text-overflow: white-space:}View Code 2.定位，为了能够精确的定位并且能够方便的调用，所以先在页面中放了两个标签，分别用于保存当前鼠标的坐标 &input type="hidden" id="pagex" /& &input type="hidden" id="pagey" /& 然后用js获取当前坐标并保存到标签中：1
jQuery(document).ready(function ($) {2
$(document).mousemove(function (e) {3
document.getElementById("pagex").value = e.pageX;//pageX() 属性是鼠标指针的位置，相对于文档的左边缘。4
document.getElementById("pagey").value = e.pageY;//pageY() 属性是鼠标指针的位置，相对于文档的上边缘。5
});View Code3.鼠标经过和离开事件js代码
function ShowInfo(username) {
$("#blockdiv").css({
"display": "block",
"left": document.getElementById('pagex').value,
"top": document.getElementById('pagey').value,
$("#messagediv").css("display", "block");
$.getJSON("../ashx/GetUserInfo.ashx?name=" + username,
function (data) {
if (data != null) {
$("#lblusername").html(data[0].User_Count)
$("#lblrealname").html(data[0].User_name);
$("#sex").html(data[0].User_Sex);
$("#lbladdress").html(data[0].User_Address)
$("#lblemall").html(data[0].User_Email);
if (data[0].User_HeadImg != null&&data[0].User_HeadImg != "") {
$("#imguserhead").attr("src", "../../Users/" + data[0].User_HeadImg.toString().substring(3));
$("#imguserhead").attr("src", "../../Users/images/搜狗截图33.png");
$("#messagediv").css("display", "none");
$("#messagediv").html("未加载到数据!");
function HiddenInfo() {
$("#blockdiv").css({
"display": "none",
$("#lblusername").html("")
$("#lblrealname").html("");
$("#sex").html("");
$("#lbladdress").html("")
$("#lblemall").html("");
}View Code 4.调用1
&a class="showuserinfo" onmouseover="ShowInfo('&%#Eval("Response_Person") %&')" onmouseout="HiddenInfo()"&2
&:Label runat="server" ID="lbl_username" Text='&%#Eval("Response_Person") %&' /&&/a&效果图：
优质网站模板jquery让div隐藏，显示，随着鼠标移动。
不知道哪个神人发明了jquery，让js编写一下子变得精炼，jquery真的是一个非常棒的js框架，让js开发变得如此简单。
让div隐藏：$("#divId").hide();
让div显示：$("divId").show();
&& 让div随着鼠标走，需要知道几个关键点。
如何获取鼠标的横纵坐标。如何让div在别的html代码上移动。
&&& var xx =
e.originalEvent.x || e.originalEvent.layerX ||
yy = e.originalEvent.y || e.originalEvent.layerY ||
&&&&$('#month').css({top:
yy, left: xx});//注意这是用css的top和left属性来控制div的。
&&&还有个注意的地方，div要设置成绝对位置才可以。
&&&&position:
只有这样div才能在其他的显示元素上面随便移动。
&&以下文章感人，希望所有北漂人心想事成！
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。当前位置 :
jQuery css3光标，鼠标悬停，悬停div，光标动画
640粉丝/2关注
[声明]本站素材来自用户分享，仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ：给予处理。
举报原因：
&&垃圾广告
&&淫秽色情
&&虚假中奖
&&敏感信息
&&人身攻击
&&骚扰他人
已发布2122
下载该资源用户也下载了
使用邮箱登录17素材
已连续签到1天,签到3天将获得积分VIP1天jquery如何让div跟随鼠标移动？_百度知道
jquery如何让div跟随鼠标移动？
想实现这样一个效果：鼠标滑过div.a时div.b弹出，然后弹出的div始终跟随鼠标，也就是弹出的时候在鼠标右下方弹出，弹出来之后div.b始终跟随在鼠标的右下方，直到鼠标移出div.a。我js(...
想实现这样一个效果：鼠标滑过div.a时div.b弹出，然后弹出的div始终跟随鼠标，也就是弹出的时候在鼠标右下方弹出，弹出来之后div.b始终跟随在鼠标的右下方，直到鼠标移出div.a。我js(jquery)代码懂得太少太少，只能实现前半部分功能。后面的跟随鼠标实在不知道该怎么弄了，求大神指点一下。下面是我写的代码，不知道jquery部分写的对不对。对了，隐藏div.b的时候我一开始用的是mouseout事件，但是效果不是太理想，鼠标移上div.a之后div.b总是闪烁，并且经常鼠标移出div.a了div.b并不隐藏。后来在w3c上面看到了mouseleave事件，试了一下，感觉好多了，但还是鼠标移动的快一点的话div.b还是会有不隐藏的bug。感觉应该是和淡入的300毫秒有关，但是不知道怎么调整了。。。&html&&head&&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&&script src=&&&&/script&&style&body{width:960margin:0}ul{list-style:width:960height:300margin-top:100} .a{background-color:#0f0;width:200height:200float:margin:20} .b{background-color:#00f;width:300height:300display:}&/style&&/head&&body& &ul class=&list&&
&li&&div class=&a&&&/div&&/li&
&li&&div class=&a&&&/div&&/li&
&li&&div class=&a&&&/div&&/li&
&div class=&b&&&/div&
&div class=&b&&&/div&
&div class=&b&&&/div&&script type=&text/javascript&& $('.b').hide(); $('.list li').mouseover(function(){
var num=$(this).index();
$('.b').eq(num).fadeIn(300).siblings(&div&).hide(); }); $('.list li').mouseleave(function(){
$('.b').hide(); });&/script& &/body&&/html&
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
IT类认证行家
采纳数：95
获赞数：113
拥有持续旺盛的对技术饥渴感。
让div随着鼠标走，需要知道几个关键点
如何获取鼠标的横纵坐标。如何让div在别的html代码上移动。
var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
$('#month').css({top: yy, left: xx});//注意这是用css的top和left属性来控制div的。
还有个注意的地方，div要设置成绝对位置才可以。
只有这样div才能在其他的显示元素上面随便移动。
&!DOCTYPE&html&&html&lang=&zh-cn&&&head&&meta&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&/&&script&src=&&style&body{width:960margin:0&}ul{list-style:width:960height:300margin-top:100}&.a{background-color:#0f0;width:200height:200float:margin:20}&.b{background-color:#00f;width:300height:300display:position:&color:&#font-size:&120}&/style&&/head&&body& &ul&class=&list&&
&li&&div&class=&a&&1&/div&&/li&
&li&&div&class=&a&&2&/div&&/li&
&li&&div&class=&a&&3&/div&&/li&&&&&&&/ul&
&div&class=&b&&1-1&/div&
&div&class=&b&&2-2&/div&
&div&class=&b&&3-3&/div&&script&type=&text/javascript&& $('.b').hide(); $('.list&li').mousemove(function(e){
$('.b').eq($(this).index()).show().css({
&top&:&e.pageY+20,
&left&:&e.pageX+20
}).siblings(&div&).hide(); }); $('.list&li').mouseleave(function(){
$('.b').hide(); });&/script&&/body&&/html&
本回答被提问者和网友采纳
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。&script language="javascript" src="jquery-1.4.2.min.js"&&/script&
function show(obj, id) {
var objDiv = $("#" + id + "");
$(objDiv).css("display", "block");
$(objDiv).css("left", event.clientX);
$(objDiv).css("top", event.clientY + 10);
function hide(obj, id) {
var objDiv = $("#" + id + "");
$(objDiv).css("display", "none");
&div id="mydiv1" style="position: display: border: 1
background:"&
提示内容一
&div id="mydiv2" style="position: display: border: 1
background:"&
提示内容二
&a id="t1" onmouseover="javascript:show(this,'mydiv1');" onmouseout="hide(this,'mydiv1')"&
鼠标悬停一&/a&
&a id="t2" onmouseover="javascript:show(this,'mydiv2');" onmouseout="hide(this,'mydiv2')"&
鼠标悬停二&/a&
图片上鼠标悬停即出现含提示内容的div层
css实现 ： 鼠标移动上去显示div,移开隐藏div
鼠标悬停到一个按钮上或者链接上,展示下div
实现隐藏div
用javascript 当mouseover 悬停在一个td里的内容时显示一段文字
实现鼠标放到一个div上显示出另一个隐藏的div
jquery鼠标放上去显示悬浮层（弹出div层）定位
没有更多推荐了，