首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 18, 2015

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

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

效果图 2 ：

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

完整代码：

<!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://3water.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="https://3water.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://3water.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="https://3water.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://3water.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="https://3water.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://3water.com">最新新闻内容摘要《机密》1</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》2</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》3</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》4</a></li> 
          <li><a href="https://3water.com">最新新闻内容摘要《机密》5</a></li> 
        </ul> 
      </li> 
       
    </ul> 
   
  </div> 
 </body> 
</html>

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

- Author -

YX_blog

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS 控制CSS样式表
Aug 20 Javascript
js函数调用的方式
May 06 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
javascript包装对象实例分析
Mar 27 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
vue中组件的过渡动画及实现代码
Nov 21 Javascript
微信小程序实现录音功能
Nov 22 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 #Javascript
如何使用jquery easyui创建标签组件
Nov 18 #Javascript
JavaScript严格模式详解
Nov 18 #Javascript
每天一篇javascript学习小结（String对象）
Nov 18 #Javascript
跟我学习javascript的执行上下文
Nov 18 #Javascript
跟我学习JScript的Bug与内存管理
Nov 18 #Javascript
跟我学习javascript的循环
Nov 18 #Javascript
北美洲购物网站(1) 缅甸购物网站(1) 乌克兰购物网站(27) 巴基斯坦购物网站(2) 匈牙利购物网站(11) 摩纳哥购物网站(1) 秘鲁购物网站(1) 越南购物网站(9) 亚洲购物网站(6) 希腊购物网站(6)
You might like
解析htaccess伪静态的规则
2013/06/18 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
jQuery动画效果图片轮播特效
2016/01/12 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
Python的高级Git库 Gittle
2014/09/22 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python中的枚举类型示例介绍
2019/01/09 Python
Django框架安装方法图文详解
2019/11/04 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
python 实现图片裁剪小工具
2021/02/02 Python
全球性的在线鞋类品牌：Public Desire
2019/04/03 全球购物
党校培训思想汇报
2013/12/30 职场文书
运动会广播稿80字
2014/01/23 职场文书
保健品市场营销方案
2014/03/31 职场文书
员工教育培训协议书
2014/09/27 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
如何写辞职信
2015/05/13 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android