首页
所有分类
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代码经典广告
Oct 21 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
javascript实现连续赋值
Aug 10 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
基于javascript的拖拽类封装详解
Apr 19 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 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
网络工程师面试题(96) DB面试题(126) C++面试题(199) C#面试题(90) LINUX面试题(83) JAVA面试题(401) Oracle面试题(81) 软件测试工程师面试题(53) Android面试题(6) .NET面试题(131)
You might like
第十三节 对象串行化 [13]
2006/10/09 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python实现月食效果实例代码
2019/06/18 Python
一套Delphi的笔试题一
2016/02/14 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
小学毕业感言50字
2014/02/16 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
事假请假条范文
2014/04/11 职场文书
党委班子对照检查材料
2014/08/19 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
党员转正意见怎么写
2015/06/03 职场文书
工作自我评价范文
2019/03/21 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers