jQuery自制提示框tooltip改进版


Posted in Javascript onAugust 01, 2016

自带的title的提示效果的响应速度是非常缓慢的,使用jQuery自制提示tooltip!

jQuery自制提示框tooltip改进版

HTML:

<p><a href="#" title="超链接提示1" class="tooltip">提示1</a></p>
<p><a href="#" title="超链接提示2" class="tooltip">提示2</a></p>
<p><a href="#" title="自带超链接提示1">自带超链接提示1</a></p>
<p><a href="#" title="自带超链接提示2">自带超链接提示2</a></p>

CSS:

p a{display: block;width:150px;height:50px;line-height:50px;
    background:#FF3366;color:#fff;border-radius: 3px;text-align: center;}
  #tooltip{position:absolute;width:200px;height:50px;line-height:50px;border:1px solid #ccc;text-align: center;box-shadow: 1px 1px 2px #ccc;background:#fff;border-radius:5px;}

JQ:

$(function(){
    var x=10,y=20;//使得鼠标相对于tooltip偏离的距离
    $("a.tooltip").mouseover(function(e){
      this.myTitle=this.title;//获取title,临时存储
      this.title="";//避免和原生提示重复

      var tooltip="<div id='tooltip'>"+this.myTitle+"</div>";
      $("body").append(tooltip);
      //css()设置样式
      $("#tooltip").css({
        "top":(e.pageY+y)+"px",//e.pageX相对与文档,e.clientX相对于可视区
        "left":(e.pageX+x)+"px",
      }).show("fast");
    }).mouseout(function(){
      this.title=this.myTitle;//重复恢复
      $("#tooltip").remove();//记得要把生成的结点移除掉
    }).mousemove(function(e){
      $("#tooltip").css({
        "left":(e.pageX+x)+"px",
        "top":(e.pageY+y)+"px",
      });
    });
  });

改进版:将上面的tooltip内容加上图片预览!

jQuery自制提示框tooltip改进版

JQ:

$(function(){
    var x=10,y=20;
    $("a.tooltip").mouseover(function(e){
      this.myTitle=this.title;
      this.title="";
      var imgTitle=this.myTitle?"<br/><span id='tooltipspan'>"+this.myTitle+"</span>":"";
      var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='产品预览图'/>"+imgTitle+"</div>";
      $("body").append(tooltip);
      $("#tooltip").css({
        "top":(e.pageY+y)+"px",
        "left":(e.pageX+x)+"px",
      }).show("fast");
    }).mouseout(function(){
      this.title=this.myTitle;
      $("#tooltip").remove();
    }).mousemove(function(e){
      $("#tooltip").css({
        "top":(e.pageY+y)+"px",
        "left":(e.pageX+x)+"px",
      })
    });
  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中:hidden选择器用法实例
Dec 30 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
在pycharm中开发vue的方法步骤
Mar 04 Javascript
react 生命周期实例分析
May 18 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
Three.js学习之文字形状及自定义形状
Aug 01 #Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 #Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 #Javascript
基于原生JS实现图片裁剪
Aug 01 #Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 #Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 #Javascript
AngularJS基础 ng-if 指令用法
Aug 01 #Javascript
You might like
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
人工神经网络算法知识点总结
2019/06/11 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
解释i节点在文件系统中的作用
2013/11/26 面试题
机工车间主任岗位职责
2014/03/05 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
接收函格式
2015/01/30 职场文书
工地材料员岗位职责
2015/04/11 职场文书
Python访问Redis的详细操作
2021/06/26 Python
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
nginx容器方式反向代理实战
2022/04/18 Servers
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers