首页
所有分类
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 相关文章推荐
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
JavaScript极简入门教程（二）：对象和函数
Oct 25 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
JavaScript基础篇（6）之函数表达式闭包
Dec 11 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
node.js缺少mysql模块运行报错的解决方法
Nov 13 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
浅谈javascript的闭包
Jan 23 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 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
persistedstate(1) InputStream(1) Vue(10) OutputStream(1) 本地化存储(1) click(1) vuex(1) Storage(1) HashSet集合(1) Set接口(1)
You might like
一个简单的PHP投票程序源码
2007/03/11 PHP
php学习 函数 课件
2008/06/15 PHP
php 8小时时间差的解决方法小结
2009/12/22 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
js比较日期大小的方法
2015/05/12 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
Angular下H5上传图片的方法（可多张上传）
2017/01/09 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
高性能js数组去重(12种方法，史上最全)
2019/12/21 Javascript
vue 查看dist文件里的结构(多种方式)
2020/01/17 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
python3.x 将byte转成字符串的方法
2018/07/17 Python
python根据文本生成词云图代码实例
2019/11/15 Python
Python几种常见算法汇总
2020/06/02 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
住房租房协议书
2014/08/20 职场文书
新店开张活动方案
2014/08/24 职场文书
运动会加油稿100字
2014/09/19 职场文书
迎新生标语大全
2014/10/06 职场文书
党支部意见范文
2015/06/02 职场文书
单位考核鉴定意见
2015/06/05 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
发工资啦！教你用Python实现邮箱自动群发工资条
2021/05/10 Python