jquery悬浮提示框完整实例


Posted in Javascript onJanuary 13, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
js和jquery实现监听键盘事件示例代码
Jun 24 #Javascript
jQuery简单操作cookie的插件实例
Jan 13 #Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 #Javascript
javascript中的作用域和闭包详解
Jan 13 #Javascript
JSON+Jquery省市区三级联动
Jan 13 #Javascript
Easyui form combobox省市区三级联动
Jan 13 #Javascript
轻松实现javascript图片轮播特效
Jan 13 #Javascript
You might like
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
2020/05/31 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
PyTorch基本数据类型(一)
2019/05/22 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
python动态规划算法实例详解
2020/11/22 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
个人素质的自我评价分享
2013/12/16 职场文书
幼儿园小班评语
2014/04/18 职场文书
2014年后勤工作总结
2014/11/18 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
思想道德自我评价2015
2015/03/09 职场文书
网吧员工管理制度
2015/08/05 职场文书
考试后的感想
2015/08/07 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL