«

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 vue如何去掉手机名称
2 如何阻止vue组件渲染
3 javascript实现网页端解压并查看zip文件
4 jQuery实现下拉框功能实例代码
5 初识Node.js
6 jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
7 JS 实现倒计时数字时钟效果【附实例代码】
8 JS中的二叉树遍历详解
9 VUE中data配置的作用是什么
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

搜索

最新文章

热门文章