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

2024-09-29 14:45:24

在淘宝，京东等其他网页上我们能够看到，当鼠标移上去的时候，能够使其下面出现其它选项，现在就演示一下这种功能
主要是用到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>

JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n
js浮动图片的动态效果

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

本文实例讲述了JS实现可缩放.拖动.关闭和最小化的浮动窗口方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: <!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
基于javascript实现右下角浮动广告效果

本文实例为大家分享了基于javascript实现右下角浮动广告效果,供大家参考,具体内容如下效果图: 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>右下角广告代码</title> <script type="text/javascript&q
js 图片随机不定向浮动的实现代码

复制代码代码如下: //很有趣的浮动哦,不用太多代码,和大家分享下<html><head>随机浮动<style type="text/css">#divimg{/*对图片进行绝对定位*/position:absolute;}</style></head><body><div id="divimg"><img src="../../resource/images/fl
JavaScript实现上下浮动的窗口效果代码

本文实例讲述了JavaScript实现上下浮动的窗口效果代码.分享给大家供大家参考.具体如下: 这里介绍使用JavaScript实现上下浮动的窗口,在垂直方向上漂浮,代码内的JS函数有超丰富的浮动层定义功能,像浮动层位置高度.初始化事件触发器.设定浮动层为可见,用style.left设定浮动层左边距.浮动层的运动速度等,还有更多的设置选项都能实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-up-down-float-move-win
javascript实现div浮动在网页最顶上并带关闭按钮效果实例

复制代码代码如下: <html> <head> <title>javascript实现div浮动在网页最顶上并带关闭按钮效果实例</title> <style type="text/css"> <!-- body { margin: 0px;padding: 0px;text-align: center;} TD {FONT-SIZE: 12px; COLOR: #333;} #toubiao {BORDER-BOTT
js实现浮动在网页右侧的简洁QQ在线客服代码

本文实例讲述了js实现浮动在网页右侧的简洁QQ在线客服代码.分享给大家供大家参考.具体如下: 这是一个简洁版的QQ在线客服,其实重要的是这个JS函数,只要有了这个JS函数,实际上你完全可以写一个这样的在线客服,它是用JS+CSS去控制层的隐藏与展开.注意代码中的QQ号记着要改一下哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-float-qq-onlinefk-style-codes/ 具体代码如下: <!DOCTYPE html P
js 右侧浮动层效果实现代码(跟随滚动)

实现代码一. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <!--**
js实现的简单图片浮动效果完整实例

本文实例讲述了js实现的简单图片浮动效果.分享给大家供大家参考,具体如下: 利用window对象,实现一个图片的浮动效果 1.现有一个广告div,就是我们要控制的,它的起始点(0,0) 2.设定横向和纵向的速度 3.控制广告div移动 1)广告div是否达到边界 2)如果到达边界后,我们设置速度反向移动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

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

相关推荐

随机推荐