javascript彈出帶文字信息的提示框效果
來源:易賢網(wǎng) 閱讀:1061 次 日期:2016-07-26 15:19:49
溫馨提示:易賢網(wǎng)小編為您整理了“javascript彈出帶文字信息的提示框效果”,方便廣大網(wǎng)友查閱!

js作用域是前端開發(fā)必掌握的基礎知識。這篇文章主要介紹了javascript中的作用域的相關資料,需要的朋友可以參考下

本文實例講述了javascript彈出帶文字信息的提示框效果。分享給大家供大家參考,具體如下:

tooltips.js:

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

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.getElementByIdx && document.all);

var ns6 = (document.getElementByIdx && !document.all);

var ua = navigator.userAgent.toLowerCase();

var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0);

function getmouseposition(e)

{

  if(document.getElementByIdx)

  {

    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.getElementByIdx('tooltip');

    lixlpixel_tooltip.style.left =(mousex+pagex+offsetx) + 'px';

 lixlpixel_tooltip.style.top =(mousey+pagey+offsety) + 'px';

  }

}

function tooltip(tip)

{

  if(!document.getElementByIdx('tooltip')) newelement('tooltip');

  var lixlpixel_tooltip = document.getElementByIdx('tooltip');

  lixlpixel_tooltip.innerHTML = tip;

  lixlpixel_tooltip.style.display = 'block';

  document.onmousemove = getmouseposition;

}

function exit()

{

  document.getElementByIdx('tooltip').style.display = 'none';

}

test.html:

<html>

<head>

<style>

.tableBorder7{width: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" src='tooltips.js'>

</script>

</HEAD>

<BODY>

<div onmouseover="tooltip('如果你添加的是一個播客(Podcast),請選中此復選框。');"onmouseout="exit();">蝶戀花</div>

</BODY>

</HTML>

希望本文所述對大家JavaScript程序設計有所幫助。

更多信息請查看網(wǎng)絡編程
易賢網(wǎng)手機網(wǎng)站地址:javascript彈出帶文字信息的提示框效果

2025國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯(lián)系我們 | 人才招聘 | 網(wǎng)站聲明 | 網(wǎng)站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業(yè)和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網(wǎng)安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
聯(lián)系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網(wǎng)