jquery实现鼠标滑过显示提示框的方法


Posted in Javascript onFebruary 05, 2015

本文实例讲述了jquery实现鼠标滑过显示提示框的方法。分享给大家供大家参考。具体如下:

一、jquery鼠标滑过显示提示框实例

1、效果图

jquery实现鼠标滑过显示提示框的方法

2、实现代码 ( 需要自行添加  jquery.js、按钮图片、提示框图片  )

HTML 代码

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Animated Menu Hover 1</title>

<script type="text/javascript" src="jquery。js"></script>

<script type="text/javascript">

$(document).ready(function(){

 $(".menu li").hover(function() {

  $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");

 }, function() {

  $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");

 });

});

</script>
<style type="text/css">

body {

 margin: 10px auto;

 width: 570px;

 font: 75%/120% Arial, Helvetica, sans-serif;

}

.menu {

 margin: 100px 0 0;

 padding: 0;

 list-style: none;

}

.menu li {

 padding: 0;

 margin: 0 2px;

 float: left;

 position: relative;

 text-align: center;

}

.menu a {

 padding: 14px 10px;

 display: block;

 color: #000000;

 width: 144px;

 text-decoration: none;

 font-weight: bold;

 background: url('背景图片1') no-repeat center center;

}

.menu li em {

 background: url('背景图片2') no-repeat;

 width: 180px;

 height: 45px;

 position: absolute;

 top: -85px;

 left: -15px;

 text-align: center;

 padding: 20px 12px 10px;

 font-style: normal;

 z-index: 2;

 display: none;

}

</style>

</head>

<body>

<ul class="menu">

 <li>

  <a href="https://3water.com">Web Designer Wall</a>  

  <em>A wall of design ideas, web trends, and tutorials</em>

 </li>

 <li>

  <a href="https://3water.com">Best Web Gallery</a>

  <em>Featuring the best CSS and Flash web sites</em>

 </li>

 <li>

  <a href="https://3water.com">N.Design Studio</a>

  <em>Blog and design portfolio of WDW designer, Nick La</em>

 </li>

</ul>

</body>

</html>

二、jquery鼠标滑过显示提示框实例二

鼠标划过用户名时,在鼠标右下角显示div展示用户资料这个效果

1、效果图

jquery实现鼠标滑过显示提示框的方法

2、实现方式

无非就三大块,一个是div的定位,这个是该效果的主要难点;二个是通过ajax异步加载数据;第三个就是要用到两个js属性onmouseover和onmouseout,即鼠标经过和鼠标离开。
 
3、实现步骤

(1)、首先设计好要显示用户资料的div的样式,  这里要注意的该方法不是给每个用户名的旁边都绑定一个div,当鼠标经过时显示,鼠标离开时隐藏,网页里就一个显示信息的div,哪里需要显示时就定位在哪里,这要就需要把该div的定位方式设置为绝对定位。
 
HTML代码:

<div class="blockdiv" id="blockdiv">

<div class="pic">

 <img src="../../Users/images/899。png" id="imguserhead" />

</div>

<div class="box">

 <table width="220" border="0" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">

     <tr>

  <td style="width: 70px;">用户名:</td>

  <td>

      <label id="lblusername"></label>

  </td>

     </tr>

     <tr>

  <td>真实姓名:</td>

  <td>

      <label id="lblrealname"></label>

  </td>

     </tr>

     <tr>

  <td>性别:</td>

  <td>

      <label id="sex"></label>

  </td>

     </tr>

     <tr>

  <td>所属地区:</td>

  <td>

      <label id="lbladdress"></label>

  </td>

     </tr>

     <tr>

  <td>邮箱:</td>

  <td>

      <label id="lblemall"></label>

  </td>

     </tr>

 </table>

 <div style="text-align: left; color: green; line-height: 40px; height: 30px; display: none;" id="messagediv ">正在加载中...</div>

    </div>

</div>

(2)、相应css代码

#blockdiv{

width:380px;

height:160px;

float:left;

display:none;

border: 1px solid #ccc;  position: absolute; z-index: 1; opacity: 0.1; background: white

}

.pic{

width:100px;

height:100px;

border:1px solid #ccc;

border-radius:10px; 

float:left; margin:10px; 

overflow:hidden;

}

.box{

width:240px;

height:140px;

margin:10px 0 10px 10px;

float:left;

overflow:hidden;text-overflow:ellipsis; white-space:nowrap;}

(3)、定位,为了能够精确的定位并且能够方便的调用,所以先在页面中放了两个标签,分别用于保存当前鼠标的坐标

<input type="hidden" id="pagex" />

<input type="hidden" id="pagey" />

然后用js获取当前坐标并保存到标签中:

jQuery(document).ready(function ($) {

$(document).mousemove(function (e) {

 document.getElementById("pagex").value = e.pageX;//pageX() 属性是鼠标指针的位置,相对于文档的左边缘。

 document.getElementById("pagey").value = e.pageY;//pageY() 属性是鼠标指针的位置,相对于文档的上边缘。

    });

});

(4)、鼠标经过和离开事件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));

  }

  else {

      $("#imguserhead").attr("src", "../../Users/images/900.png");

  }

  $("#messagediv").css("display", "none");

     }

     else

  $("#messagediv").html("未加载到数据!");

 });

}

function HiddenInfo() {

    $("#blockdiv").css({

 "display": "none",

    });
    $("#lblusername").html("")

    $("#lblrealname").html("");

    $("#sex").html("");

    $("#lbladdress").html("")

    $("#lblemall").html("");

}

(5)、调用

<a class="showuserinfo" onmouseover="ShowInfo('<%#Eval("Response_Person") %>')" onmouseout="HiddenInfo()">

jquery鼠标滑过显示提示框

</a>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript之锁定表格栏位
Jun 29 Javascript
XENON基于JSON变种
Jul 27 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
js实现加载更多功能实例
Oct 27 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
May 11 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
javascript去除字符串左右两端的空格
Feb 05 #Javascript
jQuery判断对象是否存在的方法
Feb 05 #Javascript
jquery实现对联广告的方法
Feb 05 #Javascript
jquery实现在光标位置插入内容的方法
Feb 05 #Javascript
Jquery中offset()和position()的区别分析
Feb 05 #Javascript
JS实现一个按钮的方法
Feb 05 #Javascript
JS继承用法实例分析
Feb 05 #Javascript
You might like
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
理解javascript中的闭包
2017/01/11 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
vue 组件简介
2020/07/31 Javascript
Python map和reduce函数用法示例
2015/02/26 Python
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
大学生创业项目方案
2014/03/08 职场文书
求职信范文怎么写
2015/03/19 职场文书
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏