欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript中字體浮動(dòng)效果的簡單實(shí)例演示

 更新時(shí)間：2015年11月18日 11:37:34   作者：YX_blog  
這篇文章主要介紹了javascript中字體浮動(dòng)效果的簡單實(shí)例演示,在一些網(wǎng)站上經(jīng)常遇到當(dāng)鼠標(biāo)移導(dǎo)航欄的時(shí)候，能夠使其彈出下拉選項(xiàng)，現(xiàn)在就演示一下這種功能，感興趣的小伙伴們可以參考一下

在淘寶，京東等其他網(wǎng)頁上我們能夠看到，當(dāng)鼠標(biāo)移上去的時(shí)候，能夠使其下面出現(xiàn)其它選項(xiàng)，現(xiàn)在就演示一下這種功能
主要是用到css里面的display，以及鼠標(biāo)觸發(fā)的事件onmouseover（），和onmouseout()方式，在加上css樣式的設(shè)置和標(biāo)簽之間額使用就能實(shí)現(xiàn)。
具體如下：
1，為了很好的控制，采用了列表的樣式，并且在設(shè)置css樣式時(shí)很方便
2，采用了<a>標(biāo)簽的樣式，能夠讓鼠標(biāo)移上去對(duì)其他的有反應(yīng)
具體的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> 在這里，移動(dòng)第一個(gè)之后就會(huì)消失，不能夠點(diǎn)擊下面的--> 
        <a href="javascript:void(0)">最新新聞</a> 
                <ul><!--這樣包裝為了能更好的封裝下面的內(nèi)容，到時(shí)候鼠標(biāo)移動(dòng)上面，就能對(duì)下面的這個(gè)操作了--> 
          <li><a >最新新聞內(nèi)容摘要《機(jī)密》1</a></li> 
          <li><a >最新新聞內(nèi)容摘要《機(jī)密》2</a></li> 
          <li><a >最新新聞內(nèi)容摘要《機(jī)密》3</a></li> 
          <li><a >最新新聞內(nèi)容摘要《機(jī)密》4</a></li> 
          <li><a >最新新聞內(nèi)容摘要《機(jī)密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">新浪新聞</a> 
        <ul> 
           <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》1</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》2</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》3</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》4</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">社會(huì)新聞</a> 
        <ul> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》1</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》2</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》3</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》4</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">最新新聞</a> 
        <ul> 
           <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》1</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》2</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》3</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》4</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》5</a></li> 
        </ul> 
      </li></ul></div>

除了上面很重要css的設(shè)置也很重要，如下：

<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; 
      /*設(shè)置寬度，讓每一列平均顯示*/ 
    } 
    #newsid1 li a{ 
      color:#8080ff; 
      text-decoration:none;/*讓超鏈接下面沒有橫線*/ 
      text-align:center; 
      line-height:30px; 
       
    } 
    #newsid1 li a:hover{ 
      /*a:hover移上去有反應(yīng)設(shè)置的具體的顏色和背景顏色 
*/ 
      color:#400080; 
      background-color:#ffffff; 
    } 
    #newsid1 li ul li{ 
      line-height:30px; 
      color:#ff8040; 
      background-color:#808000;; 
    } 
    #newsid1 li ul{ 
      display:none;/*默認(rèn)的必須全部隱藏，然后在鼠標(biāo)移上去觸發(fā)時(shí)間之后設(shè)置 dispaly:block; 
*/ 
    } 
  </style>

 效果圖 1：鼠標(biāo)沒有移上去時(shí)候

效果圖 2 ：

完整代碼：

<!DOCTYPE html> 
<html> 
 <head> 
  <!--主要目的  當(dāng)鼠標(biāo)滑過文字時(shí)候出現(xiàn)其他文字顯示 
    采用<ul>和<li><a href="標(biāo)題"><ul><li>隱藏的內(nèi)容 
    采用大量的css模型進(jìn)行修飾 
    傳入this對(duì)象 
    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; 
      /*設(shè)置寬度，讓每一列平均顯示*/ 
    } 
    #newsid1 li a{ 
      color:#8080ff; 
      text-decoration:none;/*讓超鏈接下面沒有橫線*/ 
      text-align:center; 
      line-height:30px; 
       
    } 
    #newsid1 li a:hover{ 
      /*a:hover移上去有反應(yīng)設(shè)置的具體的顏色和背景顏色 
*/ 
      color:#400080; 
      background-color:#ffffff; 
    } 
    #newsid1 li ul li{ 
      line-height:30px; 
      color:#ff8040; 
      background-color:#808000;; 
    } 
    #newsid1 li ul{ 
      display:none;/*默認(rèn)的必須全部隱藏，然后在鼠標(biāo)移上去觸發(fā)時(shí)間之后設(shè)置 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> 在這里，移動(dòng)第一個(gè)之后就會(huì)消失，不能夠點(diǎn)擊下面的--> 
        <a href="javascript:void(0)">最新新聞</a> 
                <ul><!--這樣包裝為了能更好的封裝下面的內(nèi)容，到時(shí)候鼠標(biāo)移動(dòng)上面，就能對(duì)下面的這個(gè)操作了--> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》1</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》2</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》3</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》4</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">新浪新聞</a> 
        <ul> 
           <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》1</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》2</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》3</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》4</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">社會(huì)新聞</a> 
        <ul> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》1</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》2</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》3</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》4</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">最新新聞</a> 
        <ul> 
           <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》1</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》2</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》3</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》4</a></li> 
          <li><a href="http://www.dbjr.com.cn">最新新聞內(nèi)容摘要《機(jī)密》5</a></li> 
        </ul> 
      </li> 
       
    </ul> 
   
  </div> 
 </body> 
</html>

相關(guān)文章

最新評(píng)論