純JS半透明Tip效果代碼

更新時間：2008年10月25日 01:40:30 作者：

自己根據網上提供的一個透明功能類庫寫的純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" /> <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://www.dhdzp.com" onmouseover="showContent(0, event)" onmouseout="hiddenContent(0, event)" style="cursor:default">鏈接</a> <div   class="raal8sl"   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="d0tixy5"   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 都是專業(yè)人員和管理人員(38)。在德國，到 2010 年 將只有 10％的職位適合非技術工人，而在 1976 年為 35％。(39) </p> <p>但這并不只是一個失業(yè)問題。失業(yè)的年輕人傾向于從事更多的暴力犯 罪，并不愿擔當家長的責任。"青春期男孩是最反復無常并最具暴力的了。 美國一半的暴力犯罪是由 24 歲以下的男孩干的，四分之一的暴力犯罪事 件是由 18 歲以下男孩干的。大多數西方國家的數據也與美國相似。"</p> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

js+css實現紅包雨效果
這篇文章主要為大家詳細介紹了js+css實現紅包雨效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-07-07
await/async無法捕獲與處理錯誤信息的解決方案分享
async await 中添加錯誤處理個人認為是有必要的,下面這篇文章主要給大家介紹了關于await/async無法捕獲與處理錯誤信息的解決方案,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-02-02
一個簡單的js樹形菜單
說到樹形菜單，貌似一般是用在一些管理系統(tǒng)里面的，我是還沒有用到過，有些zTree之類的插件已經做得比較好了
2011-12-12
基于JavaScript實現猜數字游戲代碼實例
這篇文章主要介紹了基于JavaScript實現猜數字游戲代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-07-07
jquery操作ul的一些操作筆記整理(干貨)
下面小編就為大家?guī)硪黄猨query操作ul的一些操作筆記整理(干貨)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
Require.JS中的幾種define定義方式示例
這篇文章主要給大家介紹了關于Require.JS中幾種define定義方式的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-06-06
JS定義網頁表單提交（submit）的方法
這篇文章主要介紹了JS定義網頁表單提交（submit）的方法,實例分析了javascript實現表單提交執(zhí)行自定義函數的方法,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
JavaScript輪播圖簡單制作方法
這篇文章主要為大家詳細介紹了JavaScript輪播圖簡單的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
使用Bootstrap美化按鈕實例代碼(demo)
這篇文章主要介紹了使用Bootstrap美化按鈕實例代碼(demo),非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2017-02-02
ES6中解構賦值實現變量批量賦值解放雙手
這篇文章主要為大家介紹了ES6中解構賦值實現變量批量賦值解放雙手，變量的解構賦值，聽起來很復雜，簡單點說可以理解成批量操作變量賦值
2022-04-04