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>

  • 相关阅读:
    ubuntu安装后要做什么
    JavaScript错误处理
    jQuery 事件
    display的用法
    百度排名的原理
    什么是ajax?
    CSS文档流
    引用CSS的方法
    jQuery的安装方式
    禁止WPS2019开机自启动
  • 原文地址:https://www.cnblogs.com/woodyliang/p/6497904.html
Copyright © 2011-2022 走看看