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的动态添加控件并取值的实现代码
Sep 24 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
详解JS中的attribute属性
Apr 25 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 Javascript
JavaScript实现鼠标移入随机变换颜色
Nov 24 Javascript
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/04/11 PHP
php计算函数执行时间的方法
2015/03/20 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
JS实现滚动条触底加载更多
2019/09/19 Javascript
Python多进程编程技术实例分析
2014/09/16 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python实现点云投影到平面显示
2020/01/18 Python
Python内置异常类型全面汇总
2020/05/28 Python
django rest framework使用django-filter用法
2020/07/15 Python
Python如何合并多个字典或映射
2020/07/24 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
教师作风整顿个人剖析材料
2014/10/10 职场文书
年终工作总结范文2014
2014/11/27 职场文书
开工典礼致辞
2015/07/29 职场文书
公司借款担保书
2015/09/22 职场文书
教师远程研修感悟
2015/11/18 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
2016年学校禁毒宣传活动工作总结
2016/04/05 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
导游词之桂林
2019/08/20 职场文书