网络编程

原生JavaScript实现Tooltip浮动提示框特效
网络编程 2025/10/26 佚名
3 2

使用原生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 "auto";
        toolTipBox.style.height = height "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="/UploadFiles/2021-04-02/1.jpg">


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,Tooltip浮动提示框,js浮动提示框,Tooltip浮动提示框
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“原生JavaScript实现Tooltip浮动提示框特效”

暂无“原生JavaScript实现Tooltip浮动提示框特效”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com