javascript中字体浮动效果的简单实例演⽰
在淘宝，京东等其他⽹页上我们能够看到，当⿏标移上去的时候，能够使其下⾯出现其它选项，现在就演⽰⼀下这种功能
主要是⽤到css⾥⾯的display，以及⿏标触发的事件onmouseover（），和onmouseout()⽅式，在加上css样式的设置和标签之间额使⽤就能实现。
具体如下：
1，为了很好的控制，采⽤了列表的样式，并且在设置css样式时很⽅便
2，采⽤了<a>标签的样式，能够让⿏标移上去对其他的有反应
具体的js函数写的功能：
<script type="text/javascript">
function open1(node){
var node1=node;
var ElementsByTagName("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="www.baidu">最新新闻内容摘要《机密》1</a></li>
<li><a href="www.baidu">最新新闻内容摘要《机密》2</a></li>
<li><a href="www.baidu">最新新闻内容摘要《机密》3</a></li>
<li><a href="www.baidu">最新新闻内容摘要《机密》4</a></li>
<li><a href="www.baidu">最新新闻内容摘要《机密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">新浪新闻</a>
<ul>
<li><a href="www.jb51">最新新闻内容摘要《机密》1</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》2</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》3</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》4</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">社会新闻</a>
<ul>
<li><a href="www.jb51">最新新闻内容摘要《机密》1</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》2</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》3</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》4</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">最新新闻</a>
<ul>
<li><a href="www.jb51">最新新闻内容摘要《机密》1</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》2</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》3</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》4</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》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;/*让其并排显⽰*/
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 ElementsByTagName("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;
}
line-height:30px;
color:#ff8040;
background-color:#808000;;
}
#newsid1 li ul{
display:none;/*默认的必须全部隐藏，然后在⿏标移上去触发时间之后设置 dispaly:block;
*/
}
</style>
<script type="text/javascript">
function open1(node){
text align centervar node1=node;
var ElementsByTagName("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="www.jb51">最新新闻内容摘要《机密》1</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》2</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》3</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》4</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">新浪新闻</a>
<ul>
<li><a href="www.jb51">最新新闻内容摘要《机密》1</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》2</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》3</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》4</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">社会新闻</a>
<ul>
<li><a href="www.jb51">最新新闻内容摘要《机密》1</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》2</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》3</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》4</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》5</a></li>
</ul>
</li>
<li onmouseover="open1(this)"; onmouseout="open1(this)">
<a href="javascript:void(0)" onclick="">最新新闻</a>
<ul>
<li><a href="www.jb51">最新新闻内容摘要《机密》1</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》2</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》3</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》4</a></li>
<li><a href="www.jb51">最新新闻内容摘要《机密》5</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论