原生JavaScript实现Tooltip浮动提示框特效


Posted in Javascript onMarch 07, 2017

使用原生JavaScript设计和实现Tooltip浮动提示框特效,了解代码简化、事件绑定、事件冒泡等技巧和知识。

特效四个关键点:

显示:鼠标移到ToolTip超链接上时,ToolTip提示框可以显示出来
隐藏:鼠标移开时,ToolTip提示框自动隐藏
定位:ToolTip提示框的位置需要根据ToolTip超链接的位置来设置
可配置:ToolTip提示框可以根据参数不同,改变尺寸和显示内容

注意点:

1)border-radius和 box-shadow兼容写法

2)不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。对应mouseout

      只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave

3)W3C规定不允许内联元素嵌套块级元素 ,其中的a链接嵌套了div,可能不符合W3C标准( tip:他是移入a链接的时候在a链接中创建的div )

简单的函数封装写法(便于引用,缩短代码量):

1)通过元素的id获得元素的DOM引用

var $ = function(id){
return document.getElementById(id);
 }

2)绑定事件的函数

function addEvent(obj,event,fn){ //要绑定的元素对象,要绑定的事件,触发的回调函数
if(obj.addEventListener){ //非IE,支持冒泡和捕获
obj.addEventListenner(event,fn,false);
}else if(obj.attachEvent){ //IE,只支持冒泡
obj.attachEvent('on'+event,fn);
}
}

效果如图:

原生JavaScript实现Tooltip浮动提示框特效

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<style type="text/css">
  body{
    font-size: 14px;
    line-height: 1.8;
    background: url("img/bg.jpg") no-repeat center top;
    font-family: "微软雅黑";
  }
  #demo{
    width: 500px;
    margin: 30px auto;
    padding: 20px 30px;
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;/*这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性*/
    -webkit-border-radius: 10px;/*苹果;谷歌,等一些浏览器认,因为他们都用的是webkit内核*/
    box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
  }
  #demo h2{
    color: #03f;
  }
  #demo .tooltip{
    color: #03f;
    cursor: help;
  }
  .tooltip-box{
    display: block;
    background: #fff;
    line-height: 1.6;
    border: 1px solid #66CCFF;
    color: #333;
    padding: 20px;
    font-size: 12px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    overflow: auto;
  }
  #mycard img{
    float: left;
    width: 100px;
    height: 100px;
    padding: 10px;
  }
  #mycard p{
    float: left;
    width: 150px;
    padding: 0 10px;
  }
</style>
<script type="text/javascript">
  window.onload=function(){
    //绑定事件的函数
     function addEvent(obj,event,fn){  //要绑定的元素对象,要绑定的事件,触发的回调函数
      if(obj.addEventListener){      //非IE,支持冒泡和捕获
        obj.addEventListener(event,fn,false);
      }else if(obj.attachEvent){      //IE,只支持冒泡
        obj.attachEvent('on'+event,fn);
      }
    }
    //通过用户代理的方式判断是否是IE的方法,不能判断出IE11
    var isIE = navigator.userAgent.indexOf("MSIE") > -1;

    var $ = function(id){
      return document.getElementById(id);
    }
    var demo = $("demo");
    //obj  - ToolTip超链接元素
    //id   - ToolTip提示框id
    //html  - ToolTip提示框HTML内容
    //width - ToolTip提示框宽度(可选)
    //height - ToolTip提示框高度(可选)
    function showTooltip(obj,id,html,width,height){
      if($(id)==null){
        //创建 <div class="tooltip-box" id="xx">xxxxxxxx</div>
        var toolTipBox;
        toolTipBox = document.createElement('div');
        toolTipBox.className = "tooltip-box";
        toolTipBox.id = id;
        toolTipBox.innerHTML = html;
        obj.appendChild(toolTipBox);
        toolTipBox.style.width = width ? width + 'px':"auto";
        toolTipBox.style.height = height ? height + 'px':"auto";
        if(!width && isIE){
          toolTipBox.style.width = toolTipBox.offsetWidth;//因为IE不支持auto属性
        }
        toolTipBox.style.position = 'absolute';
        toolTipBox.style.display = 'block';
        var left = obj.offsetLeft;
        var top = obj.offsetTop + 20;
        //当浏览器窗口缩小时不让提示框超出浏览器
        if(left + toolTipBox.offsetWidth > document.body.clientWidth){
          var demoLeft = demo.offsetLeft;
          left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;
          if(left < 0)
          left = 0;
        }
        toolTipBox.style.left = left + 'px';
        toolTipBox.style.top = top + 'px';
        addEvent(obj,"mouseleave" ,function(){
          setTimeout(function(){
            $(id).style.display = 'none';
          },300);
        });
      }
      else{
        //显示
        $(id).style.display = 'block';
      }
    }
    //事件冒泡
addEvent(demo,'mouseover',function(e){
  var event = e || window.event;
  var target = event.target || event.srcElement;//IE下,event对象有srcElement属性,但是没有target属性;
  //Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的
  //event.srcElement:表示的当前的这个事件源。
  if(target.className == "tooltip"){
    var _html;
    var _id;
    var _width = 200;
    switch (target.id){
      case "tooltip1":
        _id = "t1";
        _html = "中华人民共和国";
        break;
      case "tooltip2":
        _id = "t2";
        _html = "美国篮球职业联赛";
        break;
      case "tooltip3":
        _id = "t3";
        _html = "<h2>春晓</h2><p>春眠不觉晓,</p><p>处处闻啼鸟。</p><p>夜来风雨声,</p><p>花落知多少。</p>";
        _width = 100;
        break;
      case "tooltip4":
        _id = "t4";
        _html = "<img src='img/1.jpg' width='500' /> ";
        _width = 520;
        break;
      case "tooltip5":
        _id = "t5";
        _html = "<div id='mycard'><img src='img/2.jpg' alt=''/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>";
        _width = 300;
        break;
      case "tooltip6":
        _id = "t6";
        _html = "<iframe src='http://www.imooc.com/' width='480' height='300'></iframe>";
        _width = 500;
        break;
    }
    showTooltip(target,_id,_html,_width);
  }
});
    /* var t1 = $("tooltip1");
    var t2 = $("tooltip2");
    var t3 = $("tooltip3");
    var t4 = $("tooltip4");
    var t5 = $("tooltip5");
    var t6 = $("tooltip6");
    t1.onmouseenter = function () {
      showTooltip(this, "t1", '中华人民共和国', 200);
    };
    t2.onmouseenter = function () {
      showTooltip(this, "t2", '美国篮球职业联赛', 200);
    };
    t3.onmouseenter = function () {
      showTooltip(this, "t3", '<h2>春晓</h2><p>春眠不觉晓,</p><p>处处闻啼鸟。</p><p>夜来风雨声,</p><p>花落知多少。</p>', 100);
    };
    t4.onmouseenter = function () {
      showTooltip(this, "t4", '<img src="img/1.jpg" width="500" /> ', 520);
    };
    t5.onmouseenter = function () {
      var _html = '<div id="mycard"><img src="img/2.jpg" alt=""/><p><strong>昵称一定要长</strong></p><p>我的简介我的简介</p></div>';
      showTooltip(this, "t5", _html, 300);
    };
    t6.onmouseenter = function () {
      var _html = '<iframe src="http://www.imooc.com/" width="480" height="300"></iframe>'
      showTooltip(this, "t6", _html, 500);
    };*/
  }
</script>
<body>
<div id="demo">
  <h2>原生JavaScript实现ToolTip效果</h2>
  <p>ToolTip效果是非常常见的网页特效,它可以在用户将指针放置在控件上时为用户显示提示信息。
    比如简称文字显示一行文字全称,例:<a class="tooltip" id="tooltip1">中国</a>, <a class="tooltip" id="tooltip2">NBA</a>。
    又比如显示一段文字,例:唐诗三百首中的<a class="tooltip" id="tooltip3">春晓</a>你会么?如果不看tooltip提示你背不出来的话,那么你
    可要加油了。
  </p>
  <p>
    ToolTip效果还可以用来显示图片,例:<a class="tooltip" id="tooltip4">西湖美景</a>。当然显示一块儿带格式的内容也不在话下,例:
    <a class="tooltip" id="tooltip5">我的资料</a>。
  </p>
  <p>
    甚至你可以显示一整个网站:例:<a class="tooltip" id="tooltip6">慕课网</a>。
  </p>
  <p>
    注意好的ToolTip需要考虑样式、效果、页面的边界等信息,希望你可以做出更漂亮的ToolTip效果。
  </p>
</div>
</body>
</html>

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

Javascript 相关文章推荐
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
JavaScript创建表格的方法
Apr 13 Javascript
JavaScript动态生成表格的示例
Nov 02 Javascript
基于JavaScript实现图片剪切效果
Mar 07 #Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 #Javascript
js放到head中失效的原因与解决方法
Mar 07 #Javascript
Bootstrap媒体对象学习使用
Mar 07 #Javascript
angular十大常见问题
Mar 07 #Javascript
Bootstrap表单控件学习使用
Mar 07 #Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 #Javascript
You might like
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
php简单统计中文个数的方法
2016/09/30 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
Python实现115网盘自动下载的方法
2014/09/30 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
小学生寒假家长评语
2014/04/16 职场文书
党小组鉴定意见
2015/06/02 职场文书
亮剑精神观后感
2015/06/05 职场文书