当前位置：首页 > 设计在线 > 网页设计 > Dreamweaver > 用DW中ToolTip代码改进的提示框

用DW中ToolTip代码改进的提示框

点击次数：22 次发布日期：2008-11-27 17:02:24 作者：源代码网

源代码网推荐

这个我早就改好了一直没有放上来.现在发给大家用用
源代码网推荐注意这几个变量它们影响到提示框的效果

var rT=true;//允许图像过渡
源代码网推荐var bT=true;//允许图像淡入淡出
源代码网推荐var tw=150;//提示框宽度
源代码网推荐var endaction=false;//结束动画
源代码网推荐

css控制动画效果
源代码网推荐
源代码网推荐<style type="text/css">
源代码网推荐
源代码网推荐</style>
源代码网推荐

只要把里面的"revealTrans(duration=.2,transition=1)"滤镜的transition值改变可以换动画过渡效果了.
源代码网推荐不说这么多了地球人都知道 revealTrans 和 blendtrans了吧

运行代码框
源代码网推荐<head> <title>图像效果演示</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script> /* 舜子制作 Made by PuterJam */ //--初始化变量-- var rT=true;//允许图像过渡 var bT=true;//允许图像淡入淡出 var tw=150;//提示框宽度 var endaction=false;//结束动画 var ns4 = document.layers; var ns6 = document.getElementById && !document.all; var ie4 = document.all; offsetX = 0; offsetY = 20; var toolTipSTYLE=""; function initToolTips() { if(ns4||ns6||ie4) { if(ns4) toolTipSTYLE = document.toolTipLayer; else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style; else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style; if(ns4) document.captureEvents(Event.MOUSEMOVE); else { toolTipSTYLE.visibility = "visible"; toolTipSTYLE.display = "none"; } document.onmousemove = moveToMouseLoc; } } function toolTip(msg, fg, bg) { if(toolTip.arguments.length < 1) // hide { if(ns4) { toolTipSTYLE.visibility = "hidden"; } else { //--图象过渡，淡出处理-- if (!endaction) {toolTipSTYLE.display = "none";} if (rT) document.all("msg1").filters[1].Apply(); if (bT) document.all("msg1").filters[2].Apply(); document.all("msg1").filters[0].opacity=0; if (rT) document.all("msg1").filters[1].Play(); if (bT) document.all("msg1").filters[2].Play(); if (rT){ if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){ toolTipSTYLE.display = "none";} } if (bT){ if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){ toolTipSTYLE.display = "none";} } if (!rT && !bT) toolTipSTYLE.display = "none"; //---------------------- } } else // show { if(!fg) fg = "#777777"; if(!bg) bg = "#eeeeee"; var content = "<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="" + fg + "" class="trans_msg"><td>" + "<table border="0" cellspacing="0" cellpadding="3" bgcolor="" + bg + ""><td width=" + tw + "><font face="Arial" color="" + fg + "" size="-2">" + msg + " </font></td></table></td></table>"; if(ns4) { toolTipSTYLE.document.write(content); toolTipSTYLE.document.close(); toolTipSTYLE.visibility = "visible"; } if(ns6) { document.getElementById("toolTipLayer").innerHTML = content; toolTipSTYLE.display="block" } if(ie4) { document.all("toolTipLayer").innerHTML=content; toolTipSTYLE.display="block" //--图象过渡，淡入处理-- var cssopaction=document.all("msg1").filters[0].opacity document.all("msg1").filters[0].opacity=0; if (rT) document.all("msg1").filters[1].Apply(); if (bT) document.all("msg1").filters[2].Apply(); document.all("msg1").filters[0].opacity=cssopaction; if (rT) document.all("msg1").filters[1].Play(); if (bT) document.all("msg1").filters[2].Play(); //---------------------- } } } function moveToMouseLoc(e) { if(ns4||ns6) { x = e.pageX; y = e.pageY; } else { x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; } toolTipSTYLE.left = x + offsetX; toolTipSTYLE.top = y + offsetY; return true; } </script> <style type="text/css">  </style> </head> <script> </script> <body> <div id="toolTipLayer" style="position:absolute; visibility: hidden"></div> <script>initToolTips()</script> <font face="Arial"> <a href="#" onMouseOver="toolTip("这是个好东东<br>你说呢<br>哈哈")" onMouseOut="toolTip()">test</a></font> <font face="Arial"> <a href="#" onMouseOver="toolTip("你要吗，好好用的哦真的", "#FFFF00", "red")" onMouseOut="toolTip()">test</a></font> <font face="Arial"> <a href="#" onMouseOver="toolTip("这是个好东东<br>你说呢<br>哈哈", "#FFFF00", "orange")" onMouseOut="toolTip()">test</a></font> <font face="Arial"> <a href="#" onMouseOver="toolTip("<marquee>跑啊!!跑</marquee>", "#FFFF00", "orange")" onMouseOut="toolTip()">test</a></font> </body>
源代码网推荐 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

讨论请到这里：http://www.blueidea.com/bbs/newsdetail.asp?id=1517086

源代码网供稿.

上一篇: DW构建Blog全程实录(1) 下一篇: JS 216网页安全色调色板 DW 风格

网友评论 (0)

我也要写评论

用DW中ToolTip代码改进的提示框的相关新闻

会员中心

设计在线

本站推荐

设计在线之精华