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

使用原生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);
}
}

效果如图：

  
  


  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;
    -webkit-border-radius: 10px;
    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;
  }




  原生Javascript实现ToolTip效果
  
ToolTip效果是非常常见的网页特效，它可以在用户将指针放置在控件上时为用户显示提示信息。
    比如简称文字显示一行文字全称，例：中国， NBA。
    又比如显示一段文字，例：唐诗三百首中的春晓你会么？如果不看tooltip提示你背不出来的话，那么你
    可要加油了。
  
  

    ToolTip效果还可以用来显示图片，例：西湖美景。当然显示一块儿带格式的内容也不在话下，例：
    我的资料。
  
  

    甚至你可以显示一整个网站：例：慕课网。
  
  

    注意好的ToolTip需要考虑样式、效果、页面的边界等信息，希望你可以做出更漂亮的ToolTip效果。
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。