纯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需再刷新一下页面才能执行]

您可能感兴趣的文章:

js+css实现红包雨效果
这篇文章主要为大家详细介绍了js+css实现红包雨效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
await/async无法捕获与处理错误信息的解决方案分享
async await 中添加错误处理个人认为是有必要的,下面这篇文章主要给大家介绍了关于await/async无法捕获与处理错误信息的解决方案,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
一个简单的js树形菜单
说到树形菜单，貌似一般是用在一些管理系统里面的，我是还没有用到过，有些zTree之类的插件已经做得比较好了
2011-12-12
基于JavaScript实现猜数字游戏代码实例
这篇文章主要介绍了基于JavaScript实现猜数字游戏代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
jquery操作ul的一些操作笔记整理(干货)
下面小编就为大家带来一篇jquery操作ul的一些操作笔记整理(干货)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
Require.JS中的几种define定义方式示例
这篇文章主要给大家介绍了关于Require.JS中几种define定义方式的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06
JS定义网页表单提交（submit）的方法
这篇文章主要介绍了JS定义网页表单提交（submit）的方法,实例分析了javascript实现表单提交执行自定义函数的方法,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03
JavaScript轮播图简单制作方法
这篇文章主要为大家详细介绍了JavaScript轮播图简单的制作方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
使用Bootstrap美化按钮实例代码(demo)
这篇文章主要介绍了使用Bootstrap美化按钮实例代码(demo),非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
ES6中解构赋值实现变量批量赋值解放双手
这篇文章主要为大家介绍了ES6中解构赋值实现变量批量赋值解放双手，变量的解构赋值，听起来很复杂，简单点说可以理解成批量操作变量赋值
2022-04-04

纯JS半透明Tip效果代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具