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="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://www.nhooo.com">最新新闻内容摘要《机密》1</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》2</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》3</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》4</a></li>
<li><a href="https://www.nhooo.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://www.nhooo.com">最新新闻内容摘要《机密》1</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》2</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》3</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》4</a></li>
<li><a href="https://www.nhooo.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://www.nhooo.com">最新新闻内容摘要《机密》1</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》2</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》3</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》4</a></li>
<li><a href="https://www.nhooo.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="https://www.nhooo.com">最新新闻内容摘要《机密》1</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》2</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》3</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》4</a></li>
<li><a href="https://www.nhooo.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://www.nhooo.com">最新新闻内容摘要《机密》1</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》2</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》3</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》4</a></li>
<li><a href="https://www.nhooo.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://www.nhooo.com">最新新闻内容摘要《机密》1</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》2</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》3</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》4</a></li>
<li><a href="https://www.nhooo.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://www.nhooo.com">最新新闻内容摘要《机密》1</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》2</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》3</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》4</a></li>
<li><a href="https://www.nhooo.com">最新新闻内容摘要《机密》5</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html> 声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#nhooo.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
基础教程
- HTML基础教程
- HTML5基础教程
- HTML参考手册
- SVG 教程
- CSS 教程
- CSS 参考手册
- CSS3教程
- Bootstrap3 教程
- Bootstrap4 教程
- Font Awesome图标
- JavaScript 教程
- JavaScript 参考手册
- jQuery 教程
- AJAX 教程
- JSON 教程
- AngularJS 教程
- ReactJS 教程
- NodeJS 教程
- Python 教程
- C++ 教程
- Golang 教程
- C 语言教程
- PHP 教程
- C# 教程
- LINQ 教程
- Lua 教程
- Ruby 教程
- Rust 教程
- Linux 教程
- R 语言教程
- Docker 教程
- Scala 教程
- MatLab 教程
- Erlang 教程
- Pandas教程
- Numpy教程
- Matplotlib教程
- Flask教程
- Java 教程
- SpringBoot 教程
- JDBC 教程
- JSP 教程
- Servlet 教程
- Maven 教程
- Spring 教程
- Django 教程
- Swift 教程
- Kotlin 教程
- SQL 教程
- MongoDB 教程
- SQLite 教程
- PostgreSQL 教程
- MySql 教程
- Redis 教程
- Elasticsearch 教程
猜你喜欢
- 基于Jquery制作图片文字排版预览效果附源码下载
- javascript下拉列表菜单的实现方法
- Android编程之OpenGL绘图技巧总结
- jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
- Android编程根据系列图片绘制动画实例总结
- MySQL下常见的启动失败与备份失败问题的解决教程
- Android编程向服务器发送请求时出现中文乱码问题的解决方法
- MySQL的InnoDB引擎入门学习教程
- WordPress网站性能优化指南
- Android编程实现QQ表情的发送和接收完整实例(附源码)
- 详解JavaScript中常用的函数类型
- 使用C#代码获取存储过程返回值
- MySQL针对Discuz论坛程序的基本优化教程
- JavaScript如何动态创建table表格
- Android编程常用技巧实例总结
- javascript中字体浮动效果的简单实例演示
- jQuery EasyUI 布局之动态添加tabs标签页
- MySQL入门完全指南及Linux系统下基本的安装教程
- php+ajax实现无刷新分页
- 如何使用jquery easyui创建标签组件
- MySQL的日志基础知识及基本操作学习教程
- asp.net微信开发（用户分组管理）
- 如何使用php脚本给html中引用的js和css路径打上版本号
- C#实现DataList里面嵌套DataList的折叠菜单
- asp.net微信开发（已关注用户管理）