純JS半透明Tip效果代碼

2019-11-21 01:35:14

字體：大中小

來源：轉載

供稿：網友

<!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" /> <script type="text/ecmascript"> function opacity(id, opacStart, opacEnd, millisec) { //speed for each frame var speed = Math.round(millisec / 100); var timer = 0; //determine the direction for the blending, if start and end are the same nothing happens if(opacStart > opacEnd) { for(i = opacStart; i >= opacEnd; i--) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } } else if(opacStart < opacEnd) { for(i = opacStart; i <= opacEnd; i++) { setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); timer++; } } } //change the opacity for different browsers function changeOpac(opacity, id) { var obj = document.getElementById(id); if (obj) { var s = obj.style; s.opacity = (opacity / 100); s.MozOpacity = (opacity / 100); s.KhtmlOpacity = (opacity / 100); s.filter = "alpha(opacity=" + opacity + ")"; s = null; } } function shiftOpacity(id, millisec) { //if an element is invisible, make it visible, else make it ivisible if(document.getElementById(id).style.opacity == 0) { opacity(id, 0, 100, millisec); } else { opacity(id, 100, 0, millisec); } } function blendimage(divid, imageid, imagefile, millisec) { var speed = Math.round(millisec / 100); var timer = 0; //set the current image as background document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")"; //make image transparent changeOpac(0, imageid); //make new image document.getElementById(imageid).src = imagefile; //fade in image for(i = 0; i <= 100; i++) { setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed)); timer++; } } function currentOpac(id, opacEnd, millisec) { //standard opacity is 100 var currentOpac = 100; //if the element has an opacity set, get it if(document.getElementById(id).style.opacity < 100) { currentOpac = document.getElementById(id).style.opacity * 100; } //call for the function that changes the opacity opacity(id, currentOpac, opacEnd, millisec) } function showContent(i, event){ showid = "content" + i; var target = document.getElementById(showid); target.style.position = "absolute"; if(navigator.appName!="Netscape"){ event=window.event; event.srcElement.style.fontWeight = "700"; } else { event.target.style.fontWeight = "700"; } target.style.top = event.clientY + 22 +"px"; target.style.left = event.clientX + 12 + "px"; //復制一個背景 var bg = target.cloneNode(true); if (bg) { bg.id="bg1"; if (bg.style.backgroundColor.length==0) { bg.style.backgroundColor ="#FFFFE1"; } bg.style.filter = "alpha(opacity=0)"; bg.style.opacity = 0; target.parentNode.appendChild(bg); opacity("bg1", 0, 90, 300); bg.style.display="block"; } target.style.display = "block"; } function hiddenContent(i, event){ if(navigator.appName!="Netscape"){ event=window.event; event.srcElement.style.fontWeight = "400"; } else { event.target.style.fontWeight = "400"; } hiddenid = "content" + i; document.getElementById(hiddenid).style.display = "none"; var bg = document.getElementById("bg1"); if (bg) { bg.parentNode.removeChild(bg); } } </script> <style type="text/css"> p{text-indent:2em} </style> </head> <body> <a href="http://m.survivalescaperooms.com" onmouseover="showContent(0, event)" onmouseout="hiddenContent(0, event)" style="cursor:default">鏈接</a> <div   class="iwvjtn8m0"   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   class="iwvjtn8m0"   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需刷新才能執行]

上一篇：JavaScript 讀URL參數增強改進版版

下一篇：javascript replace()用法詳解附實例代碼