网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > 网页特效
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.特殊标签fieldset实现的表中表效.
.Java Applet 编程技巧实例专辑-播.
.一种超酷的文字提示效果.
.在两个下拉选择框中找相同的颜色.
.打开页面即提醒是否打印页面 [网.
.同一IP只弹出一次窗口的特效代码.
.从窗口右下脚弹出的仿QQ的提示框.
.javascript的容错脚本.
.超酷的一种菜单特效代码,网页特.
.网易学院新闻图片切换特效代码倾.
.页面中的FTP登录.
.点击图片出现另一个图片提示和鼠.
.用普通链接打开系统的内容[网页特.
.距离北京2008年奥运会开幕的倒记.
.图片的幻灯片特效(各种效果).
.看看你的网站在世界的排名榜.
.进入页面输入不同的数字转到不同.
.用CSS制作的很不错的简洁的网页导.
.不停闪烁的图片(可以加上连接).
.网页特效:跟随鼠标的图片的网页.

一个比较酷的CSS生成带提示的菜单

发表日期:2007-12-19


<!-- 把下列代码加入到head区内 -->
<style type="text/css">

#coolmenu{
border: 1px solid black;
width: 170px;
background-color: #E6E6E6;
}

#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{
width: auto;
}

#coolmenu a:hover{
background-color: black;
color: white;
}

#tabledescription{
width: 100%;
height: 3em;
padding: 2px;
filter:alpha(opacity=0);
-moz-opacity:0;
}

</style>

<script type="text/javascript">


var baseopacity=0

function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}

</script>


<!-- 把下列代码加入到body区内 -->
<div id="coolmenu">
<a href="" onMouseover="showtext('JavaScript tutorials and scripts!')" onMouseout="hidetext()">knowsky.com</a>
<a href="/js/" onMouseover="showtext('300+ free JavaScripts')" onMouseout="hidetext()">knowsky.com</a>
<a href="/jsref/" onMouseover="showtext('Comprehensive JavaScript Reference')" onMouseout="hidetext()">knowsky.com</a>
<a href="http://bbs.knowsky.com" onMouseover="showtext('Web coding and development forums!')" onMouseout="hidetext()">knowsky Forums</a>
<a href="" onMouseover="showtext('Award winning DHTML and JavaScripts')" onMouseout="hidetext()">knowsky.com</a>
<div id="tabledescription"></div>
</div>

上一篇:用CSS来实现鼠标翻转的特效代码2 人气:697
下一篇:3D按钮式导航条 人气:1071
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐