zoukankan      html  css  js  c++  java
  • javascript弹出带文字信息的提示框效果

    // position of the tooltip relative to the mouse in pixel //

    <html>
    <head>
    <meta charset="utf-8">
    <style>
    .tableBorder7{800;solid; background-color: #000000;}
    TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
    th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
    th.th1{background-color: #333333;}
    td.TableBody7{background-color: #B1EA45;}
    </style>
    <script language="JavaScript">
    var offsetx = 12;
    var offsety = 8;
    function newelement(newid)
    {
    if(document.createElement)
    {
    var el = document.createElement('div');
    el.id = newid;
    with(el.style)
    {
    display = 'none';
    position = 'absolute';
    }
    el.innerHTML = ' ';
    document.body.appendChild(el);
    }
    }
    var ie5 = (document.getElementById && document.all);
    var ns6 = (document.getElementById && !document.all);
    var ua = navigator.userAgent.toLowerCase();
    var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0);
    function getmouseposition(e)
    {
    if(document.getElementById)
    {
    var iebody=(document.compatMode &&
    document.compatMode != 'BackCompat') ?
    document.documentElement : document.body;
    pagex = (isapple == 1 ? 0:(ie5)?iebody.scrollLeft:window.pageXOffset);
    pagey = (isapple == 1 ? 0:(ie5)?iebody.scrollTop:window.pageYOffset);
    mousex = (ie5)?event.x:(ns6)?clientX = e.clientX:false;
    mousey = (ie5)?event.y:(ns6)?clientY = e.clientY:false;
    var lixlpixel_tooltip = document.getElementById('tooltip');
    lixlpixel_tooltip.style.left =(mousex+pagex+offsetx) + 'px';
    lixlpixel_tooltip.style.top =(mousey+pagey+offsety) + 'px';
    }
    }
    function tooltip(tip)
    {
    if(!document.getElementById('tooltip')) newelement('tooltip');
    var lixlpixel_tooltip = document.getElementById('tooltip');
    lixlpixel_tooltip.innerHTML = tip;
    lixlpixel_tooltip.style.display = 'block';
    document.onmousemove = getmouseposition;
    }
    function exit()
    {
    document.getElementById('tooltip').style.display = 'none';
    }
    </script>
    </HEAD>
    <BODY>
    <div onmouseover="tooltip('如果你添加的是一个播客(Podcast),请选中此复选框。');"onmouseout="exit();">蝶恋花</div>
    </BODY>
    </HTML>

  • 相关阅读:
    NLog.Config的配置示例
    极限定义新讲:动态定义与静态定义
    rclone命令
    linux用户管理命令
    vim常用命令
    Python解二元二次方程组
    英雄联盟为什么这么难玩?——认识所有英雄
    snap安装、运行ss
    阿里云邮件推送服务Python API发送邮件
    Visual Studio #include<bits/stdc++.h>万能头文件
  • 原文地址:https://www.cnblogs.com/woodyliang/p/6497904.html
Copyright © 2011-2022 走看看