DIV+CSS弹出提示框脚本_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:31 PM

DIV+CSS弹出提示框脚本，效果如下：

JS代码如下

Code
/*
使用方法：
          直接调用showhint()方法即可，showhint()方法中参数说明：obj为要显示提示信息的控件对象，info为提示内容
          例：
          onmouseover="showhint(this,'这是地球人都知道的东西，没什么好提示的。')"
          onmouseout="hidehintinfo()"
*/
document.write("");
function showhint(obj,info)
{
    var top=obj.offsetTop;
    var showtype="up";
    var topimg="/ControlsTest/images/hint/hintuptop.gif";
    var bottomimg="/ControlsTest/images/hint/hintupbottom.gif";
    var hintimg="/ControlsTest/images/hint/ydot.png";
    if(top    {
        showtype="down";
        topimg="/ControlsTest/images/hint/hintdowntop.gif";
        bottomimg="/ControlsTest/images/hint/hintdownbottom.gif";
    }
    showhintinfo(obj,0,0,'提示',info,0,showtype,topimg,bottomimg,hintimg);
}
function showhintinfo(obj, objleftoffset,objtopoffset, title, info , objheight, showtype ,topimg,bottomimg,hintimg)
{
    var p = getposition(obj);
    if((showtype==null)||(showtype ==""))
    {
        showtype =="up";
    }
    //以下是自己修改
    var html="

DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

"+info+"

DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

";
    //以上是自己修改
//    document.getElementById('hintiframe'+showtype).style.height= objheight + "px";
//    var frame;
//    frame=document.getElementById('hintiframe'+showtype).style.height;
//    document.getElementById('hintinfo'+showtype).innerHTML = info;
//    document.getElementById('hintdiv'+showtype).style.display='block';
    document.getElementById('hintdiv').style.display='block';

        if(objtopoffset == 0)
        {
            document.getElementById("hintdiv").innerHTML=html;
            if(showtype=="up")
            {
                document.getElementById('hintiframe').style.height= objheight + "px";
                document.getElementById('hintdiv').style.top=(p['y']-document.getElementById('hintinfo'+showtype).offsetHeight-43)+"px";
            }
            else
            {
                document.getElementById('hintiframe').style.height= objheight + "px";
                document.getElementById('hintdiv').style.top=p['y']+obj.offsetHeight+3+"px";
            }
        }
        else
        {
            document.getElementById('hintdiv').style.top=p['y']+objtopoffset+"px";
        }

    document.getElementById('hintdiv').style.left=p['x']+objleftoffset+"px";
}

function hidehintinfo()
{
    document.getElementById('hintdiv').style.display='none';
//    document.getElementById('hintdivdown').style.display='none';
}
function getposition(obj)
{
    var r = new Array();
    r['x'] = obj.offsetLeft;
    r['y'] = obj.offsetTop;
    while(obj = obj.offsetParent)
    {
        r['x'] += obj.offsetLeft;
        r['y'] += obj.offsetTop;
    }
    return r;
}

DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

"+info+"

DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。