JavaScript中字体浮动的简单演示实例
来源:互联网 发布:virtualbox 安装mac 编辑:程序博客网 时间:2024/05/18 18:47
在淘宝,京东等其他网页上我们能够看到,当鼠标移上去的时候,能够使其下面出现其它选项,现在就演示一下这种功能
主要是用到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="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="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="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></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《鼠标没有移上去时候》:
效果图 2
<!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="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="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="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="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> </ul> </div> </body></html>
0 0
- JavaScript中字体浮动的简单演示实例
- html中通过文字控制文本的颜色和字体(简单演示)
- MongoDB简单实例演示
- 本节将演示在3D空间中绘制图形的几个简单实例:
- JavaScript - 浮动广告窗口实例
- JavaScript - 浮动广告窗口实例
- javaScript中数组的方法演示
- Javascript中判断润年最最简单的代码实例
- JavaScript中发布/订阅模式的简单实例
- xml中与css的简单演示
- Spark笔记简单实例演示
- Java中怎么改变字体的一个简单实例和运行效果
- JavaScript简单的校验实例
- html中的简单实例演示(checkbox)的使用
- docker容器 最简单的java演示实例
- 演示一个最简单的JavaScript客户端验证的漏洞
- 最简单的 DIV + Javascript 分页演示代码
- 浮动字体
- 选项卡特效
- 如果你刚第一次用itellingj编写scala,并且发现运行不了main方法
- 【转载】 Visual Studio插入自定义代码段
- python脚本控制鼠标和键盘-实例
- C++基础编程----3.1数组
- JavaScript中字体浮动的简单演示实例
- STL之map/multimap关联式容器学习
- 数据库-关系代数-对除法的理解
- Java线程面试题 Top 50
- android中EditText有光标不弹出软键盘处理(转)
- java线程池
- 集合 --- ArrayList
- Jquery中$.ajax $.post load用法与区别
- Android属性动画之ValueAnimator