资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
当鼠标滑过超链接出现提示框效果实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0D%0Afunction%20enableTooltips(id)%7B%0D%0Avar%20links%2Ci%2Ch%3B%0D%0Aif(!document.getElementById%20%7C%7C%20!document.getElementsByTagName)%20return%3B%0D%0AAddCss()%3B%0D%0Ah%3Ddocument.createElement(%22span%22)%3B%0D%0Ah.id%3D%22btc%22%3B%0D%0Ah.setAttribute(%22id%22%2C%22btc%22)%3B%0D%0Ah.style.position%3D%22absolute%22%3B%0D%0Adocument.getElementsByTagName(%22body%22)%5B0%5D.appendChild(h)%3B%0D%0Aif(id%3D%3Dnull)%20links%3Ddocument.getElementsByTagName(%22a%22)%3B%0D%0Aelse%20links%3Ddocument.getElementById(id).getElementsByTagName(%22a%22)%3B%0D%0Afor(i%3D0%3Bi%3Clinks.length%3Bi%2B%2B)%7B%0D%0APrepare(links%5Bi%5D)%3B%0D%0A%7D%0D%0A%7Dfunction%20Prepare(el)%7B%0D%0Avar%20tooltip%2Ct%2Cb%2Cs%2Cl%3B%0D%0At%3Del.getAttribute(%22title%22)%3B%0D%0Aif(t%3D%3Dnull%20%7C%7C%20t.length%3D%3D0)%20t%3D%22link%3A%22%3B%0D%0Ael.removeAttribute(%22title%22)%3B%0D%0Atooltip%3DCreateEl(%22span%22%2C%22tooltip%22)%3B%0D%0As%3DCreateEl(%22span%22%2C%22top%22)%3B%0D%0As.appendChild(document.createTextNode(t))%3B%0D%0Atooltip.appendChild(s)%3B%0D%0Ab%3DCreateEl(%22b%22%2C%22bottom%22)%3B%0D%0Al%3Del.getAttribute(%22href%22)%3B%0D%0Aif(l.length%3E30)%20l%3Dl.substr(0%2C27)%2B%22...%22%3B%0D%0Ab.appendChild(document.createTextNode(l))%3B%0D%0Atooltip.appendChild(b)%3B%0D%0AsetOpacity(tooltip)%3B%0D%0Ael.tooltip%3Dtooltip%3B%0D%0Ael.onmouseover%3DshowTooltip%3B%0D%0Ael.onmouseout%3DhideTooltip%3B%0D%0Ael.onmousemove%3DLocate%3B%0D%0A%7Dfunction%20showTooltip(e)%7B%0D%0Adocument.getElementById(%22btc%22).appendChild(this.tooltip)%3B%0D%0ALocate(e)%3B%0D%0A%7Dfunction%20hideTooltip(e)%7B%0D%0Avar%20d%3Ddocument.getElementById(%22btc%22)%3B%0D%0Aif(d.childNodes.length%3E0)%20d.removeChild(d.firstChild)%3B%0D%0A%7Dfunction%20setOpacity(el)%7B%0D%0Ael.style.filter%3D%22alpha(opacity%3A95)%22%3B%0D%0Ael.style.KHTMLOpacity%3D%220.95%22%3B%0D%0Ael.style.MozOpacity%3D%220.95%22%3B%0D%0Ael.style.opacity%3D%220.95%22%3B%0D%0A%7Dfunction%20CreateEl(t%2Cc)%7B%0D%0Avar%20x%3Ddocument.createElement(t)%3B%0D%0Ax.className%3Dc%3B%0D%0Ax.style.display%3D%22block%22%3B%0D%0Areturn(x)%3B%0D%0A%7Dfunction%20AddCss()%7B%0D%0Avar%20l%3DCreateEl(%22link%22)%3B%0D%0Al.setAttribute(%22type%22%2C%22text%2Fcss%22)%3B%0D%0Al.setAttribute(%22rel%22%2C%22stylesheet%22)%3B%0D%0Al.setAttribute(%22href%22%2C%22%3F.css%22)%3B%0D%0Al.setAttribute(%22media%22%2C%22screen%22)%3B%0D%0Adocument.getElementsByTagName(%22head%22)%5B0%5D.appendChild(l)%3B%0D%0A%7Dfunction%20Locate(e)%7B%0D%0Avar%20posx%3D0%2Cposy%3D0%3B%0D%0Aif(e%3D%3Dnull)%20e%3Dwindow.event%3B%0D%0Aif(e.pageX%20%7C%7C%20e.pageY)%7B%0D%0Aposx%3De.pageX%3B%20posy%3De.pageY%3B%0D%0A%7D%0D%0Aelse%20if(e.clientX%20%7C%7C%20e.clientY)%7B%0D%0Aif(document.documentElement.scrollTop)%7B%0D%0Aposx%3De.clientX%2Bdocument.documentElement.scrollLeft%3B%0D%0Aposy%3De.clientY%2Bdocument.documentElement.scrollTop%3B%0D%0A%7D%0D%0Aelse%7B%0D%0Aposx%3De.clientX%2Bdocument.body.scrollLeft%3B%0D%0Aposy%3De.clientY%2Bdocument.body.scrollTop%3B%0D%0A%7D%0D%0A%7D%0D%0Adocument.getElementById(%22btc%22).style.top%3D(posy%2B10)%2B%22px%22%3B%0D%0Adocument.getElementById(%22btc%22).style.left%3D(posx-20)%2B%22px%22%3B%0D%0A%7D%0D%0A%3C%2Fscript%3E"> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0D%0Awindow.onload%3Dfunction()%7BenableTooltips()%7D%3B%0D%0A%3C%2Fscript%3E"> <style type="text/css"> body{font: 76%/1.5 Arial,sans-serif;background: #FFF;color: #333} div#container{width: 500px;margin:0 auto} h1{color: #3CA3FF;margin: 1em 0 0;letter-spacing: -2px} p{margin: 0 0 1.7em} a{color: #F60;font-weight:bold} a:hover{color: #F00} .tooltip{ width: 200px; color:#000; font:lighter 11px/1.3 Arial,sans-serif; text-decoration:none;text-align:center}.tooltip span.top{padding: 30px 8px 0; background: url(http://www.glzy8.com/images/uppic/200708171844190.gif) no-repeat top}.tooltip b.bottom{padding:3px 8px 15px;color: #548912; background: url(http://www.glzy8.com/images/uppic/200708171844190.gif) no-repeat bottom} </style> </head> <body> <div id="container"> <p><a href="http://www.glzy8.com/" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com%2F" title="Com@'s space">My space</a></p> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程