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=#>

除了上面很重要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=#>

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
1、正则表达式test方法 var text = "cat, bat, sat, fat"; var pattern = /.at/; if (pattern.test(text)){ alert("The pattern was matched."); } 2、正则的toString()方法 var pattern = new RegExp("\\[bc\\]at", "gi"); alert(pattern.toString()); // /\[bc\]at/gi alert(pattern.toLo
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱。 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。不像

JavaScript严格模式详解 - 2015-11-20 14:11:13

如我们所知,JavaScript 是一门灵活的语言。其灵活性同样也带来了很多坑,当然也有一些是 设计缺陷 。比如 一个变量没有声明就赋值,默认是全局变量,如 (function () { a = 3;})();console.log(window.a); // 输出3 对象有多个重名属性,最后赋值的那个属性会覆盖前面的值。如 var obj = { c: 3, c: 4}// obj 为 {c:4} 还有什么 == , typeof 之类的坑,数不胜数。毕竟 JavaScript 之父设计这门语言只用了一
你是否遇到过这样的情况,写了个function,无参数。 function showUserInfo(){alert("你好!我是小明。");}function showUserInfo(){ alert("你好!我是小明。"); } 调用: showUserInfo();showUserInfo(); 后来,发现其他地方也需要这个function,但是有变量值已经在function里面写死了,怎么办?加个参数吧。 function showUserInfo(name){name=name||"小明";a
本文实例讲述了js操作table元素实现表格行列新增、删除的方法。分享给大家供大家参考,具体如下: /************ TableTool.js ****************************************************************************************************************** **************************************************************
大家知道Jquery中有serialize方法,可以将表单序列化为一个“”连接的字符串,但却没有提供序列化为Json的方法。不过,我们可以写一个插件实现。 我在网上看到有人用替换的方法,先用serialize序列化后,将替换成“:”、“‘”: /*** 重置form表单* @param formId form的id*/function resetQuery(formId){var fid = "#" + formId;var str = $(fid).serialize();//str= cardSele
nodejs获取网页内容绑定data事件,获取到的数据会分几次相应,如果想全局内容匹配,需要等待请求结束,在end结束事件里把累积起来的全局数据进行操作! 举个例子,比如要在页面中找有没有 www.baidu.com ,不多说了,直接放代码: //引入模块var http = require("http"),fs = require('fs'),url = require('url');//写入文件,把结果写入不同的文件var writeRes = function(p, r) { fs.appendFi
jQuery EasyUI v1.4.4 下载网址: http://www.jb51.net/codes/70218.html 本教程将展示如何使用easyui创建一个标签组件。标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。 标签一次只能显示一个面板,每个面板都有标题、图表和关闭按钮。当标签被选中之后,会显示相应面板的内容。 使用HTML标记创建标签,其中包括一个DIV容器和一些DIV面板。 div class="easyui-tabs" div title="First
在这篇文章里,我将深入研究JavaScript中最基本的部分——执行上下文(execution context)。读完本文后,你应该清楚了解释器做了什么,为什么函数和变量能在声明前使用以及他们的值是如何决定的。 1、EC—执行环境或者执行上下文 每当控制器到达ECMAScript可执行代码的时候,控制器就进入了一个执行上下文(好高大上的概念啊)。 javascript中,EC分为三种: 全局级别的代码
大家都知道在JavaScript中提供了两种方式迭代对象: for 循环; for..in循环; 一、for循环 不足: 在于每次循环的时候数组的长度都要去获取; 终止条件要明确; 在for循环中,你可以循环取得数组或是数组类似对象的值,譬如arguments和HTMLCollection对象。通常的循环形式如下: // 次佳的循环for (var i = 0; i myarray.length; i++) { // 使用myarray[i]做点什么} 这种形式的循环的不足在于每次循环的时候数组的长度都要