首页
所有分类
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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
jQuery取得元素标签名称小结（附代码）
Aug 16 jQuery
bootstrap multiselect下拉列表功能
Aug 22 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 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
IDEA(2) 分块(1) 移动开发(2) OpenLayer(1) 多维数组(1) 二维数组(2) 循环(3) android studio(3) 嵌套(1) 安卓(1)
You might like
Zerg兵种介绍
2020/03/14 星际争霸
转PHP手册及PHP编程标准
2006/12/17 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
linux iconv方法的使用
2011/10/01 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
jQuery中文入门指南，翻译加实例，jQuery的起点教程
2007/02/09 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）
2012/07/31 Javascript
js读取配置文件自写
2014/02/11 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
vue中使用codemirror的实例详解
2018/11/01 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
redux.js详解及基本使用
2019/05/24 Javascript
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Django REST framework 视图和路由详解
2019/07/19 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
法国高保真音响和家庭影院商店：Son Video
2019/04/26 全球购物
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
学习党章心得体会2016
2016/01/15 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server
Python中npy和mat文件的保存与读取
2022/04/24 Python