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

在淘宝，京东等其他网页上我们能够看到，当鼠标移上去的时候，能够使其下面出现其它选项，现在就演示一下这种功能
主要是用到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="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li>
          <li><a href="http://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="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li>
          <li><a href="http://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="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li>
          <li><a href="http://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="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li>
          <li><a href="http://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="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li>
          <li><a href="http://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="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li>
          <li><a href="http://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="http://www.jb51.net">最新新闻内容摘要《机密》1</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》2</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》3</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》4</a></li>
          <li><a href="http://www.jb51.net">最新新闻内容摘要《机密》5</a></li>
        </ul>
      </li> 

    </ul> 

  </div>
 </body>
</html>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript浮动div
， javascript浮动
javascript字体浮动
javascript浮动窗口、javascript浮动广告、javascript 浮动div、javascript 浮动菜单、ajax实例演示，以便于您获取更多的相关知识。

时间： 2024-09-21 12:05:43

javascript中字体浮动效果的简单实例演示_javascript技巧的相关文章

在javascript中使用com组件的简单实现方法_javascript技巧

首先创建一个COM组件,插入一个双接口Itest,在此接口上实现以下三个方法: STDMETHODIMP Ctest::test(void) //无输入输出参数  {  // TODO: 在此添加实现代码  MessageBox(NULL,L"test",L"test",MB_OK);  return S_OK;  }  STDMETHODIMP Ctest::test1(BSTR a1) //有一个字符串输入参数  {  // TODO: 在此添加实现代码  Me

JavaScript中boolean类型之三种情景实例代码_javascript技巧

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

javascript中checkbox使用方法简单实例演示_javascript技巧

演示一个小小的例子:在购物车里面,我们能够勾选自己所选的商品,然后能够显示出相应的价格.1.首先显示出相应的界面:   相关代码: <body> 商品列表:<br/> 笔记本电脑<input type="checkbox" name="mm" value="3000" onclick="chose(this)" />3000 台式机<input type="checkbox&

JavaScript实现的浮动层框架用法实例分析_javascript技巧

本文实例讲述了JavaScript实现的浮动层框架用法.分享给大家供大家参考.具体如下: 这是一个JavaScript编写的浮动层框架,作为框架来说,骨干已经完成了.可以实现"类"."构造函数"."继承"(木有实现多继承)."静态方法"."重载"(木有实现多态),对我来说主要的意义就是,我喜欢这种代码风格,可以非常简单的重用和二次开发. 运行效果截图如下: 在线演示地址如下: http://demo.jb5

javascript中innerText和innerHTML属性用法实例分析_javascript技巧

本文实例讲述了javascript中innerText和innerHTML属性用法.分享给大家供大家参考.具体分析如下: 几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内 的文本表示形式和HTML源代码,这两个属性是可读可写的 innerHTML也可以取代createElement,属于简单,粗放型,后果自负的创建 <html xmlns="http://www.w3.org/1999/xhtml"> <head>

javascript中Array数组的迭代方法实例分析_javascript技巧

本文实例讲述了javascript迭代的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: //filter() 利用指定的函数确定是否返回数组中包涵的某一项 var num = [1,2,3,4,5,6,12]; num.filter(function(item, index, array){ return (item > 2); //[3, 4, 5, 6, 12] }); //map() 返回一个数组,数组中每一项都是在原始数组中的对应项上运行传入参数的结果 var nu

Javascript实现跑马灯效果的简单实例_javascript技巧

页面html: <div> <div id="imgShows" runat="server" style="padding-bottom: 10px;"> <div id="demo" style="overflow: hidden; width: 100%; height: 190px"> <table cellspacing="0" cel

JavaScript进阶练习及简单实例分析_javascript技巧

当用户点击"统计"按钮时,在窗口中弹出文本框中出现次数最多的字符并显示其出现的次数 点击统计按钮时效果如图所示: 实现代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

JavaScript String(字符串)对象的简单实例(推荐)_javascript技巧

返回字符串的长度: <html> <body> <script type="text/javascript"> var txt="Hello World!" document.write(txt.length) </script> </body> </html> 为字符串添加样式: <html> <body> <script type="text/java