JS+CSS實(shí)現(xiàn)另類帶提示效果的豎向?qū)Ш讲藛?/h1>
更新時(shí)間:2015年10月15日 09:50:13 作者:企鵝
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)另類帶提示效果的豎向?qū)Ш讲藛?可實(shí)現(xiàn)鼠標(biāo)滑過菜單項(xiàng)在下方固定區(qū)域顯示對(duì)應(yīng)提示文字的效果,涉及鼠標(biāo)事件控制頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS+CSS實(shí)現(xiàn)另類帶提示效果的豎向?qū)Ш讲藛?。分享給大家供大家參考。具體如下:
這是一款JS+CSS打造另類帶提示的豎向?qū)Ш讲藛危X得挺不錯(cuò),只是美工水平有限,有興趣的朋友就請(qǐng)繼續(xù)完善吧。
運(yùn)行效果截圖如下:

在線演示地址如下:
http://demo.jb51.net/js/2015/js-css-alert-txt-nav-menu-demo/
具體代碼如下:
<html>
<head>
<title>帶提示的豎向?qū)Ш讲藛?lt;/title>
<style type="text/css">
#coolmenu{
border: 1px solid black;
width: 160px;
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>
</head>
<body>
<div id="coolmenu">
<a href="#" onMouseover="showtext('精品腳本代碼下載!')" onMouseout="hidetext()">開始吧</a>
<a href="#" onMouseover="showtext('常用特效收集與發(fā)布')" onMouseout="hidetext()">網(wǎng)頁(yè)特效</a>
<a href="#" onMouseover="showtext('網(wǎng)站地圖索引')" onMouseout="hidetext()">資源分類</a>
<a href="#" onMouseover="showtext('最新更新的資源')" onMouseout="hidetext()">最新更新</a>
<a href="#" onMouseover="showtext('網(wǎng)站最熱的下載')" onMouseout="hidetext()">下載排行</a>
<div id="tabledescription"></div>
</div>
</body>
</html>
希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:- JS無限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法
- AngularJS+Bootstrap3多級(jí)導(dǎo)航菜單的實(shí)現(xiàn)代碼
- 基于JavaScript實(shí)現(xiàn)熔巖燈效果導(dǎo)航菜單
- js+div+css下拉導(dǎo)航菜單完整代碼分享
- JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單
- JS 實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單的幾種方式
- JavaScript實(shí)戰(zhàn)之帶收放動(dòng)畫效果的導(dǎo)航菜單
- ABP框架中導(dǎo)航菜單的使用及JavaScript API獲取菜單的方法
- 原生js和jquery分別實(shí)現(xiàn)橫向?qū)Ш讲藛涡Ч?/a>
- javascript HTML+CSS實(shí)現(xiàn)經(jīng)典橙色導(dǎo)航菜單
- 以JavaScript來實(shí)現(xiàn)WordPress中的二級(jí)導(dǎo)航菜單的方法
- JS+CSS實(shí)現(xiàn)簡(jiǎn)單的二級(jí)下拉導(dǎo)航菜單效果
- JS實(shí)現(xiàn)移動(dòng)端可折疊導(dǎo)航菜單(現(xiàn)代都市風(fēng))
相關(guān)文章
-
JavaScript如何對(duì)圖片進(jìn)行黑白化
這篇文章主要介紹了JS對(duì)圖片進(jìn)行黑白化的實(shí)現(xiàn)代碼,需要的朋友可以參考下 2018-04-04
-
bootstrap+jQuery 實(shí)現(xiàn)下拉菜單中復(fù)選框全選和全不選效果
這篇文章主要給大家介紹了關(guān)于利用bootstrap+jQuery 實(shí)現(xiàn)下拉菜單中復(fù)選框全選和全不選效果的相關(guān)資料,文中給出了完整的示例代碼供大家參考學(xué)習(xí),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友下面來一起看看吧。 2017-06-06
-
javascript 靜態(tài)對(duì)象和構(gòu)造函數(shù)的使用和公私問題
靜態(tài)對(duì)象和構(gòu)造函數(shù)的使用區(qū)別 平常我們會(huì)經(jīng)常使用JSON形式,或者var obj=function(){}亦或function(){}這么幾種對(duì)象的構(gòu)建辦法,有時(shí)會(huì)認(rèn)為這是等價(jià)的辦法,然而他們還有不同。
2010-03-03
-
JavaScript圣杯布局與雙飛翼布局實(shí)現(xiàn)案例詳解
這篇文章主要介紹了JavaScript圣杯布局與雙飛翼布局實(shí)現(xiàn)案例,這是前端面試中需要掌握的知識(shí)點(diǎn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧 2022-08-08
-
js實(shí)現(xiàn)貪吃蛇游戲 canvas繪制地圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)貪吃蛇游戲,canvas繪制地圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
2020-09-09
-
用headjs來管理和加載js 提高網(wǎng)站加載速度
headjs其實(shí)是一整套的工具,本文介紹的是它其中的Javascript Loader功能。需要的朋友可以參考下 2016-11-11
最新評(píng)論
本文實(shí)例講述了JS+CSS實(shí)現(xiàn)另類帶提示效果的豎向?qū)Ш讲藛?。分享給大家供大家參考。具體如下:
這是一款JS+CSS打造另類帶提示的豎向?qū)Ш讲藛危X得挺不錯(cuò),只是美工水平有限,有興趣的朋友就請(qǐng)繼續(xù)完善吧。
運(yùn)行效果截圖如下:

在線演示地址如下:
http://demo.jb51.net/js/2015/js-css-alert-txt-nav-menu-demo/
具體代碼如下:
<html>
<head>
<title>帶提示的豎向?qū)Ш讲藛?lt;/title>
<style type="text/css">
#coolmenu{
border: 1px solid black;
width: 160px;
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>
</head>
<body>
<div id="coolmenu">
<a href="#" onMouseover="showtext('精品腳本代碼下載!')" onMouseout="hidetext()">開始吧</a>
<a href="#" onMouseover="showtext('常用特效收集與發(fā)布')" onMouseout="hidetext()">網(wǎng)頁(yè)特效</a>
<a href="#" onMouseover="showtext('網(wǎng)站地圖索引')" onMouseout="hidetext()">資源分類</a>
<a href="#" onMouseover="showtext('最新更新的資源')" onMouseout="hidetext()">最新更新</a>
<a href="#" onMouseover="showtext('網(wǎng)站最熱的下載')" onMouseout="hidetext()">下載排行</a>
<div id="tabledescription"></div>
</div>
</body>
</html>
希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
- JS無限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法
- AngularJS+Bootstrap3多級(jí)導(dǎo)航菜單的實(shí)現(xiàn)代碼
- 基于JavaScript實(shí)現(xiàn)熔巖燈效果導(dǎo)航菜單
- js+div+css下拉導(dǎo)航菜單完整代碼分享
- JS中用三種方式實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單
- JS 實(shí)現(xiàn)導(dǎo)航菜單中的二級(jí)下拉菜單的幾種方式
- JavaScript實(shí)戰(zhàn)之帶收放動(dòng)畫效果的導(dǎo)航菜單
- ABP框架中導(dǎo)航菜單的使用及JavaScript API獲取菜單的方法
- 原生js和jquery分別實(shí)現(xiàn)橫向?qū)Ш讲藛涡Ч?/a>
- javascript HTML+CSS實(shí)現(xiàn)經(jīng)典橙色導(dǎo)航菜單
- 以JavaScript來實(shí)現(xiàn)WordPress中的二級(jí)導(dǎo)航菜單的方法
- JS+CSS實(shí)現(xiàn)簡(jiǎn)單的二級(jí)下拉導(dǎo)航菜單效果
- JS實(shí)現(xiàn)移動(dòng)端可折疊導(dǎo)航菜單(現(xiàn)代都市風(fēng))
相關(guān)文章
JavaScript如何對(duì)圖片進(jìn)行黑白化
這篇文章主要介紹了JS對(duì)圖片進(jìn)行黑白化的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-04-04
bootstrap+jQuery 實(shí)現(xiàn)下拉菜單中復(fù)選框全選和全不選效果
這篇文章主要給大家介紹了關(guān)于利用bootstrap+jQuery 實(shí)現(xiàn)下拉菜單中復(fù)選框全選和全不選效果的相關(guān)資料,文中給出了完整的示例代碼供大家參考學(xué)習(xí),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友下面來一起看看吧。2017-06-06
javascript 靜態(tài)對(duì)象和構(gòu)造函數(shù)的使用和公私問題
靜態(tài)對(duì)象和構(gòu)造函數(shù)的使用區(qū)別 平常我們會(huì)經(jīng)常使用JSON形式,或者var obj=function(){}亦或function(){}這么幾種對(duì)象的構(gòu)建辦法,有時(shí)會(huì)認(rèn)為這是等價(jià)的辦法,然而他們還有不同。2010-03-03
JavaScript圣杯布局與雙飛翼布局實(shí)現(xiàn)案例詳解
這篇文章主要介紹了JavaScript圣杯布局與雙飛翼布局實(shí)現(xiàn)案例,這是前端面試中需要掌握的知識(shí)點(diǎn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
js實(shí)現(xiàn)貪吃蛇游戲 canvas繪制地圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)貪吃蛇游戲,canvas繪制地圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
用headjs來管理和加載js 提高網(wǎng)站加載速度
headjs其實(shí)是一整套的工具,本文介紹的是它其中的Javascript Loader功能。需要的朋友可以參考下2016-11-11

