jquery悬浮提示框完整实例

本文实例讲述了jquery悬浮提示框实现方法。分享给大家供大家参考，具体如下：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(function() {
      x = 5;
      y = 15;
      $("p").hover(function(e) {
        otitle = this.title;
        this.title = "";
        var ndiv = "<div id='leo'>" + otitle + "</div>";
        $("body").append(ndiv);
        $("#leo").css({
          "top" : (e.pageY + y) + "px",
          "left" : (e.pageX + x) + "px"
        }).show(2000);
        $(this).mousemove(function(e) {
          $("#leo").css({
            "top" : (e.pageY + y) + "px",
            "left" : (e.pageX + x) + "px"
          }).show(1000);
        });
      }, function() {
        this.title = otitle;
        $("#leo").remove();
      });
    });
  </script>
  <style type="text/css">
    #leo {
      position: absolute;
      border: 1px solid grey;
      opacity: 0.8;
      background: grey;
    }
  </style>
</head>
<body>
  <p title="1dfgfdgdfg">If you click on me, I will disappear.</p>
  <p title="2dgfdgdfgdf">If you click on me, I will disappear.</p>
  <p title="3dgfdgfdgfder">If you click on me, I will disappear.</p>
  <p title="4ghfghfghfhgf">If you click on me, I will disappear.</p>
</body>
</html>

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

赞 (0)

相关推荐

  • jquery实现鼠标悬浮停止轮播特效

    jquery实现鼠标悬浮停止轮播特效

    本文实例讲述了jquery实现鼠标悬浮停止轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>轮播图①(手动点击轮播)</title> <link type="text/css" rel="stylesheet&

  • jQuery简单实现页面元素置顶时悬浮效果示例

    本文实例讲述了jQuery简单实现页面元素置顶时悬浮效果的方法.分享给大家供大家参考,具体如下: 一.JS Code: <script type="text/javascript"> $.fn.smartFloat = function () { var position = function (element) { var top = element.position().top, pos = element.css("position"); $(wi

  • 鼠标悬浮显示二级菜单效果的jquery实现

    1.布局: <div class="show"> <img src="~/images/head_icon.png" /> <div class="drop" style=" display:none; z-index:80000" id="profileMenu"> <ul> <li> <a class="pass" s

  • jquery实现的可隐藏重现的靠边悬浮层实例代码

    本实例使用jquery操作div的CSS,实现了可隐藏重现的靠边悬浮层,预览效果网址:http://www.keleyi.com/keleyi/phtml/xuanfudiv/ 本实例使用到jquery添加移除类的两个方法,详细介绍请参考网址:http://www.keleyi.com/a/bjac/e9e40a974de5a902.htm 下面给出完整代码,保存到html文件可查看效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • 自定义一个jquery插件[鼠标悬浮时候 出现说明label]

    自定义一个jquery插件[鼠标悬浮时候 出现说明label]

    最近在学习jquery,看了几天,决定做个小东西练练手.入门级的可以看看. 先看下面这个小东西有什么功能,有模有用. 功能:当你鼠标悬浮在你的html元素上面的时候,它会显示一个help说明性的label. 效果图: 原始: 当你的鼠标悬浮在'单击我吧1'时: 当你的鼠标悬浮在'textbox'时: 看了效果图,若是有兴趣的话,仔细看看代码吧,代码有注释 html 代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup=&quo

  • 使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框

    使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律.点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/ 以下是完整代码:保存到html文件打开也可以看效果. 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha

  • jQuery实现的简单悬浮层功能完整实例

    jQuery实现的简单悬浮层功能完整实例

    本文实例讲述了jQuery实现的简单悬浮层功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!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

  • jquery鼠标放上去显示悬浮层即弹出定位的div层

    复制代码 代码如下: <script language="javascript" src="jquery-1.4.2.min.js"></script> <script> function show(obj,id) { var objDiv = $("#"+id+""); $(objDiv).css("display","block"); $(objD

  • jQuery鼠标悬浮链接弹出跟随图片实例代码

    jQuery鼠标悬浮链接弹出跟随图片实例代码

    本文章介绍了一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,下面是代码实例: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>我们</title> <style type="text/css"> body{ margin:0

  • jQuery实现悬浮在右上角的网页客服效果代码

    jQuery实现悬浮在右上角的网页客服效果代码

    本文实例讲述了jQuery实现悬浮在右上角的网页客服效果代码.分享给大家供大家参考,具体如下: 这是款网页在线客服代码,应用了jquery插件,兼容性不错.默认状态下,客服只显示一个图片Button,用鼠标点击时展开全部内容,可用作QQ客服,售后客服等,可以作为网站快速通道,方便用户进行相应的操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-top-wen-online-demo/ 具体代码如下: <!DOCTYP

随机推荐