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

教程Tag：暂无Tag,欢迎添加,赚取U币!

缂傚倷绀佸ú锕傚焻缁€鎱筪eCMS闁荤喐鐟ュΛ婵嬨€傞崼鏇炴瀬婵炲棙鍨熼弻锟�婵炴垶姊规竟鍡涘煘閺嶎厽鈷掗柨鐕傛嫹缂備礁顦遍崰鎰耿閸ヮ剙绀夐柍銉ㄦ珪閻濓拷闂備緡鍋勯ˇ杈╃礊婢跺本鍏滈柡鍥ㄦ皑闂夊秹鏌ゆ潏銊︻棖缂佹唻鎷� 闂佸搫鍟版慨鎾椽閺嶎偆鍗氭繛鍡樻尰濮ｆ劗鈧鎮堕崕閬嶅矗閿燂拷,闂佽皫鍕姢閻庤濞婂鍫曞礃椤斿吋顏熸繛鎴炴尨閸嬫捇姊哄▎鎯ф灈闁告瑥绻樺濠氭晸閿燂拷!

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

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 '&nbsp\;</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> <p><div class="nr_xgnr"><h4><a href="http://www.mb5u.com/shipinjiaocheng/wangzhanzhizuo/" class="xgnraon" target="_blank">Drwamweaver在线视频教程</a> <a href="http://www.mb5u.com/shipindabaoxiazai/wangzhanzhizuo/" target="_blank">Drwamweaver视频教程打包下载</a></h4><ul><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80077/">Drwamweaver网页实例视频教程</a> <a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80084/">Dreamweaver+ASP动态网页设计视频教程</a> <a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80086/">Dreamweaver视频课程</a><br /><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80090/">Dreamweaver系列视频教程</a> <a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80095/">DreamweaverMX网页制作视频教程</a></ul><ul class="un"><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80210/">Dreamweaver制作网页教程下载</a> <a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80216/">Dreamweaver视频教程下载</a> <a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80531/">Dreamweaver8视频教程</a><br /><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80530/">DreamWeaver 即学即会</a> <a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80214/">Drwamweaver网页制作实例教程100例</a></ul></div></p> </div><div class="page_list nr_page"><div class="p_l"><span class='pageinfo'><u></u>共2页</span><span class='disabled'><u></u>上一页</span><span class='current'><u></u>1</span><a href='16589_2.html'><u></u>2</a><a href='16589_2.html'><u></u>下一页</a></div></div><div class="cl"></div></div> <div class="nr_info mb10"><span class="one">来源：网上收集</span>/<em style="display:none;"><span></span>/</em><span>所属分类：<a href="http://www.mb5u.com/jiaocheng/dreamweaver/">Dreamweaver教程</a></span>/<span>更新时间：2005-05-04</span> <script src="/plus/count.php?aid=16589&mid=1" type='text/javascript'></script> </div><div class="wz_nr_r"><a href="javascript:sc(16589);" title="收藏用DW中ToolTip代码改进的提示框到会员收藏夹">[收藏]</a><a href="javascript:bc('用DW中ToolTip代码改进的提示框',window.location.href,16589);">[报错]</a><a href="http://www.mb5u.com/divcssjiaocheng/divcss/" title="返回Dreamweaver教程教程列表">[返回列表]</a></div> </div> <div id="ajax_ts"></div><div id="comment"></div> <script language="javascript">comment(16589);</script> <div class="l_ad"><script src="/ajs/8.js" type="text/javascript"></script></div> <div class="vtitle">相关<strong>Dreamweaver教程</strong>：</div> <div class="xg_list"><ul><li><a href="http://www.mb5u.com/jiaocheng/29217.html">用Dreamweaver在网页中插入Flash按钮</a></li> <li><a href="http://www.mb5u.com/jiaocheng/29215.html">在Dreamweaver中编写CSS需要掌握的技巧</a></li> <li><a href="http://www.mb5u.com/jiaocheng/29213.html">Dreamweaver CS3代码片断功能面板的利用</a></li> <li><a href="http://www.mb5u.com/jiaocheng/29209.html">Dreamweaver CS3 的最新功能</a></li> <li><a href="http://www.mb5u.com/jiaocheng/29207.html">用Dreamweaver建站如何设计CSS?</a></li> <li><a href="http://www.mb5u.com/jiaocheng/29204.html">Dreamweaver文字自动换行</a></li> <li><a href="http://www.mb5u.com/jiaocheng/29200.html">探讨Dreamweaver制作网页时的空格</a></li> <li><a href="http://www.mb5u.com/jiaocheng/29195.html">使用Dreamweaver制作网页的20个技巧</a></li> <li><a href="http://www.mb5u.com/jiaocheng/29191.html">Dreamweaver MX 2004的PPT格式课件</a></li> <li><a href="http://www.mb5u.com/jiaocheng/29189.html">Dreamweaver技巧：运用代码片断工具提高css开发效率</a></li> <li><a href="http://www.mb5u.com/jiaocheng/29186.html">在DreamWeaver中编写CSS的一些技巧</a></li> <li><a href="http://www.mb5u.com/jiaocheng/29180.html">使用Dreamweaver模板批量制作网页</a></li> </ul></div> </div><div id="main_r"> <h3><a href="/rss/88.xml" class="addrss" title="订阅Dreamweaver教程更新">Dreamweaver教程Rss订阅</a>网站制作教程搜索</h3> <div class="search"> <form method="get" name="mainrs" id="searchform" action="/s.php" target="_blank"><div class="cl"><input type="hidden" name="c" value="88" /></div><input type="text" value="搜索Dreamweaver教程..." onfocus="iCc(this)" name="q" id="q" /><input type="button" onclick ="javascript:rs();" id="searchsubmit" class="ycss" value="搜" /></form></div> <s></s> <div class="r_adl"><ul> <script src="/ajs/3.js" type="text/javascript"></script> </ul></div> <script src="http://i1.mb5u.com/img/history.js" type="text/javascript"></script> <div class="sublist"> <h3>Dreamweaver教程推荐</h3> <ul><li><a target="_blank" href="http://www.mb5u.com/jiaocheng/16694.html">Dreamweaver 数据库路径的使用</a></li><li><a target="_blank" href="http://www.mb5u.com/jiaocheng/16716.html">Dreamweaver MX2004视频宝典教程工作区结构</a></li><li><a target="_blank" href="http://www.mb5u.com/jiaocheng/28667.html">给用DW编写CSS人的一些建议</a></li><li><a target="_blank" href="http://www.mb5u.com/jiaocheng/16910.html">巧用DW判断字符串中是否有换行</a></li><li><a target="_blank" href="http://www.mb5u.com/jiaocheng/28624.html">利用Dreamweaver解决网页中的空格</a></li><li><a target="_blank" href="http://www.mb5u.com/jiaocheng/16884.html">用Dreamweaver合理为为网页进行优化</a></li><li><a target="_blank" href="http://www.mb5u.com/jiaocheng/16865.html">如何用Dreamweaver批量做web网页</a></li><li><a target="_blank" href="http://www.mb5u.com/jiaocheng/16856.html">如何像表格table一样对层div进行轻松布局</a></li><li><a target="_blank" href="http://www.mb5u.com/jiaocheng/16911.html">Dreamweaver代码片断提高css开发效率</a></li><li><a target="_blank" href="http://www.mb5u.com/jiaocheng/16592.html">Javascript 表单之间的数据传递</a></li></ul> </div> <div class="sublist xglm"><h3>猜你也喜欢看这些</h3> <ul><li><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80094/">div css视频教程</a></li><li><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80526/">Dreamweaver 8.0网页设计</a></li><li><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80521/">Dreamweaver 8 大师系列教程- 高级篇</a></li><li><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80531/">Dreamweaver8视频教程</a></li><li><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80517/">中文版Dreamweaver 8从入门到精通</a></li><li><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80214/">4u2v Drwamweaver网页制作实例教程100例</a></li><li><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80523/">巧学巧用Dreamweaver8制作网页</a></li><li><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80208/">动态网页设计视频全教程</a></li><li><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80088/">CSS视频教程</a></li><li><a target="_blank" href="http://www.mb5u.com/shipinjiaocheng/80212/">吕聪贤dreamweaver视频教程下载</a></li></ul> </div> <script src="/ajs/17.js" type="text/javascript"></script> <div class="r_ad"><script src="/ajs/4.js" type="text/javascript"></script></div></div> <div class="cl"></div> </div> <div class="site_info"><ul><li><span>相关链接：</span><p><a href="javascript:copyToClipBoard();">复制本页链接</a>| <a rel="nofollow" href="http://www.mb5u.com/s.php?q=用DW中ToolTip代码改进的提示框" target="_blank">搜索用DW中ToolTip代码改进的提示框</a></p></li><li class="s_i_a"><span>教程说明：</span><p><a class="s_i_a" href="http://www.mb5u.com/jiaocheng/dreamweaver/">Dreamweaver教程</a>-<strong>用DW中ToolTip代码改进的提示框</strong><img src="http://i1.mb5u.com/img/11.gif" />。</p></li></ul><div class="cl"></div></div> </div><script src="/ajs/6.js" type="text/javascript" language="javascript"></script></body></html>