资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
纯JS半透明Tip效果代码
<!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> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fecmascript%22%3E%20%0D%0Afunction%20opacity(id%2C%20opacStart%2C%20opacEnd%2C%20millisec)%20%7B%20%0D%0A%2F%2Fspeed%20for%20each%20frame%20%0D%0Avar%20speed%20%3D%20Math.round(millisec%20%2F%20100)%3B%20%0D%0Avar%20timer%20%3D%200%3B%20%0D%0A%2F%2Fdetermine%20the%20direction%20for%20the%20blending%2C%20if%20start%20and%20end%20are%20the%20same%20nothing%20happens%20%0D%0Aif(opacStart%20%3E%20opacEnd)%20%7B%20%0D%0Afor(i%20%3D%20opacStart%3B%20i%20%3E%3D%20opacEnd%3B%20i--)%20%7B%20%0D%0AsetTimeout(%22changeOpac(%22%20%2B%20i%20%2B%20%22%2C'%22%20%2B%20id%20%2B%20%22')%22%2C(timer%20*%20speed))%3B%20%0D%0Atimer%2B%2B%3B%20%0D%0A%7D%20%0D%0A%7D%20else%20if(opacStart%20%3C%20opacEnd)%20%7B%20%0D%0Afor(i%20%3D%20opacStart%3B%20i%20%3C%3D%20opacEnd%3B%20i%2B%2B)%20%0D%0A%7B%20%0D%0AsetTimeout(%22changeOpac(%22%20%2B%20i%20%2B%20%22%2C'%22%20%2B%20id%20%2B%20%22')%22%2C(timer%20*%20speed))%3B%20%0D%0Atimer%2B%2B%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2Fchange%20the%20opacity%20for%20different%20browsers%20%0D%0Afunction%20changeOpac(opacity%2C%20id)%20%7B%20%0D%0Avar%20obj%20%3D%20document.getElementById(id)%3B%20%0D%0Aif%20(obj)%20%7B%20%0D%0Avar%20s%20%3D%20obj.style%3B%20%0D%0As.opacity%20%3D%20(opacity%20%2F%20100)%3B%20%0D%0As.MozOpacity%20%3D%20(opacity%20%2F%20100)%3B%20%0D%0As.KhtmlOpacity%20%3D%20(opacity%20%2F%20100)%3B%20%0D%0As.filter%20%3D%20%22alpha(opacity%3D%22%20%2B%20opacity%20%2B%20%22)%22%3B%20%0D%0As%20%3D%20null%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20shiftOpacity(id%2C%20millisec)%20%7B%20%0D%0A%2F%2Fif%20an%20element%20is%20invisible%2C%20make%20it%20visible%2C%20else%20make%20it%20ivisible%20%0D%0Aif(document.getElementById(id).style.opacity%20%3D%3D%200)%20%7B%20%0D%0Aopacity(id%2C%200%2C%20100%2C%20millisec)%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Aopacity(id%2C%20100%2C%200%2C%20millisec)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20blendimage(divid%2C%20imageid%2C%20imagefile%2C%20millisec)%20%7B%20%0D%0Avar%20speed%20%3D%20Math.round(millisec%20%2F%20100)%3B%20%0D%0Avar%20timer%20%3D%200%3B%20%0D%0A%2F%2Fset%20the%20current%20image%20as%20background%20%0D%0Adocument.getElementById(divid).style.backgroundImage%20%3D%20%22url(%22%20%2B%20document.getElementById(imageid).src%20%2B%20%22)%22%3B%20%0D%0A%2F%2Fmake%20image%20transparent%20%0D%0AchangeOpac(0%2C%20imageid)%3B%20%0D%0A%2F%2Fmake%20new%20image%20%0D%0Adocument.getElementById(imageid).src%20%3D%20imagefile%3B%20%0D%0A%2F%2Ffade%20in%20image%20%0D%0Afor(i%20%3D%200%3B%20i%20%3C%3D%20100%3B%20i%2B%2B)%20%7B%20%0D%0AsetTimeout(%22changeOpac(%22%20%2B%20i%20%2B%20%22%2C'%22%20%2B%20imageid%20%2B%20%22')%22%2C(timer%20*%20speed))%3B%20%0D%0Atimer%2B%2B%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Afunction%20currentOpac(id%2C%20opacEnd%2C%20millisec)%20%7B%20%0D%0A%2F%2Fstandard%20opacity%20is%20100%20%0D%0Avar%20currentOpac%20%3D%20100%3B%20%0D%0A%2F%2Fif%20the%20element%20has%20an%20opacity%20set%2C%20get%20it%20%0D%0Aif(document.getElementById(id).style.opacity%20%3C%20100)%20%7B%20%0D%0AcurrentOpac%20%3D%20document.getElementById(id).style.opacity%20*%20100%3B%20%0D%0A%7D%20%0D%0A%2F%2Fcall%20for%20the%20function%20that%20changes%20the%20opacity%20%0D%0Aopacity(id%2C%20currentOpac%2C%20opacEnd%2C%20millisec)%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20showContent(i%2C%20event)%7B%20%0D%0Ashowid%20%3D%20%22content%22%20%2B%20i%3B%20%0D%0Avar%20target%20%3D%20document.getElementById(showid)%3B%20%0D%0Atarget.style.position%20%3D%20%22absolute%22%3B%20%0D%0Aif(navigator.appName!%3D%22Netscape%22)%7B%20%0D%0Aevent%3Dwindow.event%3B%20%0D%0Aevent.srcElement.style.fontWeight%20%3D%20%22700%22%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Aevent.target.style.fontWeight%20%3D%20%22700%22%3B%20%0D%0A%7D%20%0D%0Atarget.style.top%20%3D%20event.clientY%20%2B%2022%20%2B%22px%22%3B%20%0D%0Atarget.style.left%20%3D%20event.clientX%20%2B%2012%20%2B%20%22px%22%3B%20%0D%0A%0D%0A%2F%2F%E5%A4%8D%E5%88%B6%E4%B8%80%E4%B8%AA%E8%83%8C%E6%99%AF%20%0D%0Avar%20bg%20%3D%20target.cloneNode(true)%3B%20%0D%0Aif%20(bg)%20%7B%20%0D%0Abg.id%3D%22bg1%22%3B%20%0D%0Aif%20(bg.style.backgroundColor.length%3D%3D0)%20%7B%20%0D%0Abg.style.backgroundColor%20%3D%22%23FFFFE1%22%3B%20%0D%0A%7D%20%0D%0Abg.style.filter%20%3D%20%22alpha(opacity%3D0)%22%3B%20%0D%0Abg.style.opacity%20%3D%200%3B%20%0D%0Atarget.parentNode.appendChild(bg)%3B%20%0D%0A%0D%0Aopacity(%22bg1%22%2C%200%2C%2090%2C%20300)%3B%20%0D%0Abg.style.display%3D%22block%22%3B%20%0D%0A%7D%20%0D%0A%0D%0Atarget.style.display%20%3D%20%22block%22%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20hiddenContent(i%2C%20event)%7B%20%0D%0Aif(navigator.appName!%3D%22Netscape%22)%7B%20%0D%0Aevent%3Dwindow.event%3B%20%0D%0Aevent.srcElement.style.fontWeight%20%3D%20%22400%22%3B%20%0D%0A%7D%20else%20%7B%20%0D%0Aevent.target.style.fontWeight%20%3D%20%22400%22%3B%20%0D%0A%7D%20%0D%0Ahiddenid%20%3D%20%22content%22%20%2B%20i%3B%20%0D%0Adocument.getElementById(hiddenid).style.display%20%3D%20%22none%22%3B%20%0D%0Avar%20bg%20%3D%20document.getElementById(%22bg1%22)%3B%20%0D%0Aif%20(bg)%20%7B%20%0D%0Abg.parentNode.removeChild(bg)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> <style type="text/css"> p{text-indent:2em} </style> </head> <body> <a href="http://www.glzy8.com" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com" onmouseover="showContent(0, event)" onmouseout="hiddenContent(0, event)" style="cursor:default">链接</a> <div id="content0" style="width:200px;height:300px;padding:2em;display:none"> 这是文章标题1，文字是不透明的 </div> <span onmouseover="showContent(1, event)" onmouseout="hiddenContent(1, event)" style="cursor:default">有提示文字</span> <div id="content1" style="width:200px;height:300px;padding:2em;display:none;font-weight:700"> 这是文章标题2，文字是不透明的 </div> <div style="width:34%;color:#226"> <p>教育是开启完全不同未来大门的重要钥匙。在美国十大城市中，要求 中学以下文化程度的职位数从 1970 年起已经减少了一半。从 1989 年起， 美国新设职位的 2/3 都是专业人员和管理人员(38)。在德国，到 2010 年 将只有 10％的职位适合非技术工人，而在 1976 年为 35％。(39) </p> <p>但这并不只是一个失业问题。失业的年轻人倾向于从事更多的暴力犯 罪，并不愿担当家长的责任。"青春期男孩是最反复无常并最具暴力的了。 美国一半的暴力犯罪是由 24 岁以下的男孩干的，四分之一的暴力犯罪事 件是由 18 岁以下男孩干的。大多数西方国家的数据也与美国相似。"</p> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程