«

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

时间：2024-3-2 03:34     作者：韩俊     分类： 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.maopiaopiao.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="http://www.maopiaopiao.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.maopiaopiao.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="http://www.maopiaopiao.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.maopiaopiao.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》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.maopiaopiao.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="http://www.maopiaopiao.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.maopiaopiao.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="http://www.maopiaopiao.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.maopiaopiao.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="http://www.maopiaopiao.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.maopiaopiao.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="http://www.maopiaopiao.com">最新新闻内容摘要《机密》5</a></li> 
        </ul> 
      </li> 

    </ul> 

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

标签: javascript

热门推荐

1 如何用vuex代码实现简单的购物车功能
2 jQuery实现的导航下拉菜单效果示例
3 怎么用vue实现拖拽排序效果
4 Node.js开发之访问Redis数据库教程
5 Javascript之Date对象详解
6 JQuery的常用选择器、过滤器、方法全面介绍
7 js实现兼容IE、Firefox的图片缩放代码
8 Vue怎么实现字母验证码
9 php中怎么将JSON数组转换成字符串数组
10 JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章