快捷導(dǎo)航

原生JavaScript實現(xiàn)Tooltip浮動提示框特效

更新時間：2017年03月07日 16:23:32 作者：Vampire-blog

這篇文章主要為大家詳細(xì)介紹了原生JavaScript設(shè)計和實現(xiàn)Tooltip浮動提示框特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下

使用原生JavaScript設(shè)計和實現(xiàn)Tooltip浮動提示框特效，了解代碼簡化、事件綁定、事件冒泡等技巧和知識。

特效四個關(guān)鍵點：

顯示：鼠標(biāo)移到ToolTip超鏈接上時，ToolTip提示框可以顯示出來
隱藏：鼠標(biāo)移開時，ToolTip提示框自動隱藏
定位：ToolTip提示框的位置需要根據(jù)ToolTip超鏈接的位置來設(shè)置
可配置：ToolTip提示框可以根據(jù)參數(shù)不同，改變尺寸和顯示內(nèi)容

注意點：

1）border-radius和 box-shadow兼容寫法

2）不論鼠標(biāo)指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。對應(yīng)mouseout

只有在鼠標(biāo)指針穿過被選元素時，才會觸發(fā) mouseenter 事件。對應(yīng)mouseleave

3）W3C規(guī)定不允許內(nèi)聯(lián)元素嵌套塊級元素，其中的a鏈接嵌套了div，可能不符合W3C標(biāo)準(zhǔn)( tip：他是移入a鏈接的時候在a鏈接中創(chuàng)建的div )

簡單的函數(shù)封裝寫法（便于引用，縮短代碼量）：

1)通過元素的id獲得元素的DOM引用

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

2)綁定事件的函數(shù)

function addEvent(obj,event,fn){ //要綁定的元素對象，要綁定的事件，觸發(fā)的回調(diào)函數(shù)
if(obj.addEventListener){ //非IE，支持冒泡和捕獲
obj.addEventListenner(event,fn,false);
}else if(obj.attachEvent){ //IE，只支持冒泡
obj.attachEvent('on'+event,fn);
}
}

效果如圖：

<!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;/*蘋果；谷歌，等一些瀏覽器認(rèn)，因為他們都用的是webkit內(nèi)核*/
    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(){
    //綁定事件的函數(shù)
     function addEvent(obj,event,fn){  //要綁定的元素對象，要綁定的事件，觸發(fā)的回調(diào)函數(shù)
      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內(nèi)容
    //width - ToolTip提示框?qū)挾龋蛇x）
    //height - ToolTip提示框高度（可選）
    function showTooltip(obj,id,html,width,height){
      if($(id)==null){
        //創(chuàng)建 <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;
        //當(dāng)瀏覽器窗口縮小時不讓提示框超出瀏覽器
        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屬性.但他們的作用是相當(dāng)?shù)?
  //event.srcElement：表示的當(dāng)前的這個事件源。
  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 = "美國籃球職業(yè)聯(lián)賽";
        break;
      case "tooltip3":
        _id = "t3";
        _html = "<h2>春曉</h2><p>春眠不覺曉，</p><p>處處聞啼鳥。</p><p>夜來風(fēng)雨聲，</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", '美國籃球職業(yè)聯(lián)賽', 200);
    };
    t3.onmouseenter = function () {
      showTooltip(this, "t3", '<h2>春曉</h2><p>春眠不覺曉，</p><p>處處聞啼鳥。</p><p>夜來風(fēng)雨聲，</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實現(xiàn)ToolTip效果</h2>
  <p>ToolTip效果是非常常見的網(wǎng)頁特效，它可以在用戶將指針放置在控件上時為用戶顯示提示信息。
    比如簡稱文字顯示一行文字全稱，例：<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>。當(dāng)然顯示一塊兒帶格式的內(nèi)容也不在話下，例：
    <a class="tooltip" id="tooltip5">我的資料</a>。
  </p>
  <p>
    甚至你可以顯示一整個網(wǎng)站：例：<a class="tooltip" id="tooltip6">慕課網(wǎng)</a>。
  </p>
  <p>
    注意好的ToolTip需要考慮樣式、效果、頁面的邊界等信息，希望你可以做出更漂亮的ToolTip效果。
  </p>
</div>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: