javascript中字体浮动效果的简单实例演示

站长资源 2024/11/16 佚名

17 1538 17

相思资源网 Design By www.200059.com

在淘宝，京东等其他网页上我们能够看到，当鼠标移上去的时候，能够使其下面出现其它选项，现在就演示一下这种功能
主要是用到css里面的display，以及鼠标触发的事件onmouseover（），和onmouseout()方式，在加上css样式的设置和标签之间额使用就能实现。
具体如下：
1，为了很好的控制，采用了列表的样式，并且在设置css样式时很方便
2，采用了<a>标签的样式，能够让鼠标移上去对其他的有反应
具体的js函数写的功能：

<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><!--这样包装为了能更好的封装下面的内容，到时候鼠标移动上面，就能对下面的这个操作了--> 
          <li><a href="http://www.baidu.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="http://www.baidu.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="http://www.baidu.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="http://www.baidu.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="http://www.baidu.com">最新新闻内容摘要《机密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">新浪新闻</a> 
        <ul> 
           <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">社会新闻</a> 
        <ul> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">最新新闻</a> 
        <ul> 
           <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》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;/*默认的必须全部隐藏，然后在鼠标移上去触发时间之后设置 dispaly:block; 
*/ 
    } 
  </style>

效果图 1：鼠标没有移上去时候

效果图 2 ：

完整代码：

<!DOCTYPE html> 
<html> 
 <head> 
  <!--主要目的  当鼠标滑过文字时候出现其他文字显示 
    采用<ul>和<li><a href="标题"><ul><li>隐藏的内容 
    采用大量的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;/*默认的必须全部隐藏，然后在鼠标移上去触发时间之后设置 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><!--这样包装为了能更好的封装下面的内容，到时候鼠标移动上面，就能对下面的这个操作了--> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">新浪新闻</a> 
        <ul> 
           <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">社会新闻</a> 
        <ul> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》5</a></li> 
        </ul> 
      </li> 
      <li onmouseover="open1(this)"; onmouseout="open1(this)"> 
        <a href="javascript:void(0)" onclick="">最新新闻</a> 
        <ul> 
           <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="https://www.jb51.net">最新新闻内容摘要《机密》5</a></li> 
        </ul> 
      </li> 
       
    </ul> 
   
  </div> 
 </body> 
</html>

javascript浮动div,javascript浮动,javascript字体浮动

标签：

javascript浮动div,javascript浮动,javascript字体浮动

相思资源网 Design By www.200059.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

相思资源网 Design By www.200059.com

评论“javascript中字体浮动效果的简单实例演示”

暂无javascript中字体浮动效果的简单实例演示的评论...

www.200059.com 相思资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

javascript中字体浮动效果的简单实例演示

javascript浮动div,javascript浮动,javascript字体浮动

JavaScript如何动态创建table表格

jQuery EasyUI 布局之动态添加tabs标签页

评论“javascript中字体浮动效果的简单实例演示”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

友情链接

javascript中字体浮动效果的简单实例演示

javascript浮动div,javascript浮动,javascript字体浮动

JavaScript如何动态创建table表格

jQuery EasyUI 布局之动态添加tabs标签页

评论“javascript中字体浮动效果的简单实例演示”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存