纯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="https://www.jb51.net" 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需再刷新一下页面才能执行]

您可能感兴趣的文章:

Echarts读取动态数据完整代码
这篇文章主要给大家介绍了关于Echarts读取动态数据的相关资料,使用Echarts画图时,数据一般不是静态写死的,而是通过后端接口动态获取的,需要的朋友可以参考下
2023-10-10
javascript实现鼠标选取拖动或Ctrl选取拖动
javascript实现鼠标选取拖动或Ctrl选取拖动...
2007-06-06
JavaScript禁止用户多次提交的两种方法
这篇文章主要介绍了JavaScript禁止用户多次提交的两种方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-07-07
详解js如何优雅处理后端返回的单元格数据
这篇文章主要为大家详细介绍了JavaScript如何优雅处理后端返回的单元格数据,文中的示例代码讲解详细,有需要的小伙伴可以跟随小编一起学习一下
2023-10-10
使用原生js写的一个简单slider
这篇文章主要介绍了使用原生js写的一个简单slider，喜欢的朋友可以参考下
2014-04-04
JavaScript中的this/call/apply/bind的使用及区别
这篇文章主要介绍了JavaScript中的this/call/apply/bind的使用及区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
Javascript中的async awai的用法
本篇文章主要介绍了Javascript中的async/awai的用法，将分享async / await是如何工作的，有兴趣的可以了解一下
2017-05-05
一文详解JS私有属性的6种实现方式
class是创建对象的模版，由一系列属性和方法构成，用于表示对同一概念的数据和操作。有的属性和方法是对外的，但也有的是私有的。本文梳理了六种私有属性的实现方式，需要的可以参考一下
2022-03-03
JavaScript操纵窗口的方法小结
一旦你得到了表示窗口的变量，你就能通过各种方法来操纵它。下面介绍一下对窗口的各种操作
2013-06-06
深入理解Javascript里的依赖注入
我喜欢引用这句话，“程序是对复杂性的管理”。计算机世界是一个巨大的抽象建筑群。我们简单的包装一些东西然后发布新工具，周而复始。现在思考下，你所使用的语言包括的一些内建的抽象函数或是低级操作符。这在JavaScript里是一样的
2014-03-03