javascript中字體浮動效果的簡單實例演示
更新時間：2015年11月18日 11:37:34 作者：YX_blog
這篇文章主要介紹了javascript中字體浮動效果的簡單實例演示,在一些網(wǎng)站上經(jīng)常遇到當鼠標移導航欄的時候，能夠使其彈出下拉選項，現(xiàn)在就演示一下這種功能，感興趣的小伙伴們可以參考一下
在淘寶，京東等其他網(wǎng)頁上我們能夠看到，當鼠標移上去的時候，能夠使其下面出現(xiàn)其它選項，現(xiàn)在就演示一下這種功能
主要是用到css里面的display，以及鼠標觸發(fā)的事件onmouseover（），和onmouseout()方式，在加上css樣式的設置和標簽之間額使用就能實現(xiàn)。
具體如下：
1，為了很好的控制，采用了列表的樣式，并且在設置css樣式時很方便
2，采用了<a>標簽的樣式，能夠讓鼠標移上去對其他的有反應
具體的js函數(shù)寫的功能：
<script type="text/javascript">
function open1(node){
var node1=node;
var nodes=node1.getElementsByTagName("ul")[0];
with(nodes.style){
display= (display=="block")? "none" : "block";
}
}
</script>
html部分的代碼：
<div id="news">
<ul id="newsid1">
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<!--<a href="javascript:void(0)" onmouseover="open1(this)"; onmouseout="open1(this)" >最新新聞</a> 在這里，移動第一個之后就會消失，不能夠點擊下面的-->
<a href="javascript:void(0)">最新新聞</a>
<ul><!--這樣包裝為了能更好的封裝下面的內(nèi)容，到時候鼠標移動上面，就能對下面的這個操作了-->
<li><a >最新新聞內(nèi)容摘要《機密》1</a></li>
<li><a >最新新聞內(nèi)容摘要《機密》2</a></li>
<li><a >最新新聞內(nèi)容摘要《機密》3</a></li>
<li><a >最新新聞內(nèi)容摘要《機密》4</a></li>
<li><a >最新新聞內(nèi)容摘要《機密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">新浪新聞</a>
<ul>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》1</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》2</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》3</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》4</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">社會新聞</a>
<ul>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》1</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》2</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》3</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》4</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">最新新聞</a>
<ul>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》1</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》2</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》3</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》4</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》5</a></li>
</ul>
</li></ul></div>
除了上面很重要css的設置也很重要，如下：
<style type="text/css">
#newsid1 {
list-style:none;
}
#newsid1 li ul{
list-style:none;
margin:0px;
padding:0px;
}
#newsid1 li{
float:left;/*讓其并排顯示*/
width:220px;
text-align:center;
background-color:#80ff00;
/*設置寬度，讓每一列平均顯示*/
}
#newsid1 li a{
color:#8080ff;
text-decoration:none;/*讓超鏈接下面沒有橫線*/
text-align:center;
line-height:30px;
}
#newsid1 li a:hover{
/*a:hover移上去有反應設置的具體的顏色和背景顏色
*/
color:#400080;
background-color:#ffffff;
}
#newsid1 li ul li{
line-height:30px;
color:#ff8040;
background-color:#808000;;
}
#newsid1 li ul{
display:none;/*默認的必須全部隱藏，然后在鼠標移上去觸發(fā)時間之后設置 dispaly:block;
*/
}
</style>
效果圖 1：鼠標沒有移上去時候
效果圖 2 ：
完整代碼：
<!DOCTYPE html>
<html>
<head>
<!--主要目的 當鼠標滑過文字時候出現(xiàn)其他文字顯示
采用<ul>和<li><a href="標題"><ul><li>隱藏的內(nèi)容
采用大量的css模型進行修飾
傳入this對象
function open1(node){
var node1=node;
var nodes=node1.getElementsByTagName("ul")[0];
with(nodes.style){
display= (display=="block")? "none" : "block";
}
}
-->
<title>Menufloat.html</title>
<style type="text/css">
#newsid1 {
list-style:none;
}
#newsid1 li ul{
list-style:none;
margin:0px;
padding:0px;
}
#newsid1 li{
float:left;/*讓其并排顯示*/
width:220px;
text-align:center;
background-color:#80ff00;
/*設置寬度，讓每一列平均顯示*/
}
#newsid1 li a{
color:#8080ff;
text-decoration:none;/*讓超鏈接下面沒有橫線*/
text-align:center;
line-height:30px;
}
#newsid1 li a:hover{
/*a:hover移上去有反應設置的具體的顏色和背景顏色
*/
color:#400080;
background-color:#ffffff;
}
#newsid1 li ul li{
line-height:30px;
color:#ff8040;
background-color:#808000;;
}
#newsid1 li ul{
display:none;/*默認的必須全部隱藏，然后在鼠標移上去觸發(fā)時間之后設置 dispaly:block;
*/
}
</style>
<script type="text/javascript">
function open1(node){
var node1=node;
var nodes=node1.getElementsByTagName("ul")[0];
with(nodes.style){
display= (display=="block")? "none" : "block";
}
}
</script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<div id="news">
<ul id="newsid1">
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<!--<a href="javascript:void(0)" onmouseover="open1(this)"; onmouseout="open1(this)" >最新新聞</a> 在這里，移動第一個之后就會消失，不能夠點擊下面的-->
<a href="javascript:void(0)">最新新聞</a>
<ul><!--這樣包裝為了能更好的封裝下面的內(nèi)容，到時候鼠標移動上面，就能對下面的這個操作了-->
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》1</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》2</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》3</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》4</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">新浪新聞</a>
<ul>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》1</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》2</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》3</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》4</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">社會新聞</a>
<ul>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》1</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》2</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》3</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》4</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">最新新聞</a>
<ul>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》1</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》2</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》3</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》4</a></li>
<li><a href="http://chabaoo.cn">最新新聞內(nèi)容摘要《機密》5</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單五子棋游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了請求時token過期自動刷新token操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
今天小編就為大家分享一篇LayUi數(shù)據(jù)表格自定義賦值方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
js控制文本框只能輸入中文、英文、數(shù)字與指定特殊符號的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s控制文本框只能輸入中文、英文、數(shù)字與指定特殊符號的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JS高級調(diào)試技巧：捕獲和分析 JavaScript Error詳解
前端工程師都知道 JavaScript 有基本的異常處理能力。我們可以 throw new Error()，瀏覽器也會在我們調(diào)用 API 出錯時拋出異常。但估計絕大多數(shù)前端工程師都沒考慮過收集這些異常信息2014-03-03
下面小編就為大家?guī)硪黄狫S中BOM相關知識點總結(jié)(必看篇)。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-11-11
Bootstrap優(yōu)化站點資源、響應式圖片、傳送帶使用詳解3
這篇文章主要介紹了Bootstrap優(yōu)化站點資源、完成響應式圖片、讓傳送帶支持手勢的相關知識,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了JS不要再到處使用絕對等于運算符了，對此感興趣的同學，可以參考下2021-04-04
layer.open回調(diào)獲取彈出層參數(shù)的實現(xiàn)方法
今天小編就為大家分享一篇layer.open回調(diào)獲取彈出層參數(shù)的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)簡單吸頂效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05