JavaScript中字体浮动的简单演示实例

最新推荐文章于 2024-07-18 18:21:36 发布
最新推荐文章于 2024-07-18 18:21:36 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： JavaScript实例 javascript Java学习之路 文章标签： JavaScript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangxin_blog/article/details/49128921
版权

在淘宝，京东等其他网页上我们能够看到，当鼠标移上去的时候，能够使其下面出现其它选项，现在就演示一下这种功能

主要是用到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 οnmοuseοver="open1(this)"; οnmοuseοut="open1(this)">
   				<!--<a href="javascript:void(0)"  οnmοuseοver="open1(this)"; οnmοuseοut="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 οnmοuseοver="open1(this)"; οnmοuseοut="open1(this)">
   				<a href="javascript:void(0)" οnclick="">新浪新闻</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 οnmοuseοver="open1(this)"; οnmοuseοut="open1(this)">
   				<a href="javascript:void(0)" οnclick="">社会新闻</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 οnmοuseοver="open1(this)"; οnmοuseοut="open1(this)">
   				<a href="javascript:void(0)" οnclick="">最新新闻</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 οnmοuseοver="open1(this)"; οnmοuseοut="open1(this)">
   				<!--<a href="javascript:void(0)"  οnmοuseοver="open1(this)"; οnmοuseοut="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 οnmοuseοver="open1(this)"; οnmοuseοut="open1(this)">
   				<a href="javascript:void(0)" οnclick="">新浪新闻</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 οnmοuseοver="open1(this)"; οnmοuseοut="open1(this)">
   				<a href="javascript:void(0)" οnclick="">社会新闻</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 οnmοuseοver="open1(this)"; οnmοuseοut="open1(this)">
   				<a href="javascript:void(0)" οnclick="">最新新闻</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>





learning_code_blog
关注
专栏目录
js文字浮动效果
11-07
js文字浮动效果
js文字浮动
Xuruij的博客
09-29 820
js浮动文字简介：this指向完成1.代码如下 简介：this指向完成 点击页面，随机出现文字并实现浮动 1.代码如下 代码如下（示例）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
前端文字在页面浮动效果
最新发布
qq_44410862的博客
07-18 84
【代码】前端文字转语音的方法借鉴使用。
Js单击显示浮动文字
11-19
当单击body页面时候显示富强、民主、文明、和谐。。。。等
javascript中字体浮动效果的简单实例演示
10-23
【JavaScript字体浮动效果详解】 在JavaScript中，字体浮动效果通常是指在网页的导航栏或菜单中，当鼠标悬停在某个元素上时，该元素下方会弹出一个下拉列表，展示更多的选项。这种效果常见于各类网站的顶部导航，为...
jquery彩色投票进度条简单实例演示
10-23
- CSS样式：为保持布局整洁，我们需要清除浮动并定义各种元素的样式，包括边框、背景色、字体等。`vote-box-list`类用于设置整个投票框的样式，而`vote-item-wrap`和`litem`类分别定义了选项标题和进度条的样式。 ...
页面设计 静态页面样式+演示实例及练习
07-14
这组资源，"页面设计 静态页面样式+演示实例及练习"，提供了全面的学习材料，旨在帮助初学者和进阶者深入理解如何创建吸引人的、功能完善的静态网页。 首先，我们来看“静态页面样式”。在网页设计中，静态页面是指...
java源码包---java 源码 大量 实例
04-18
　Java波浪文字，一个利用Java处理字符的实例，可以设置运动方向参数，显示文本的字符数组，高速文本颜色，显示字体的 FontMetrics对象，得到Graphics实例，得到Image实例，填充颜色数组数据，初始化颜色数组。...
JavaScript图片动态移动及文字浮现
qq_36470686的博客
09-22 2812
先说我们这个小动画想要达到的效果： 月亮最开始藏在海中，只露出一点点。 随着时间，开始慢慢上升，直到一个高度停止。 当月亮停止上升，出现一首诗。 效果一： 我们先设置一个div，设置你想要的图为背景，以让其他图片可以很方便的覆盖在上面。这个div中包含三个div： 第一个div:包含背景图中的海的图片。 第二个div:包含月亮图片。 第三个div:作为文字容器。 既然要被海遮盖住，那...
6种浮动提示框，弹出窗口，JS代码
10-22
总共有6种浮动提示框，鼠标移动图片或者文字上，会有浮动的提示窗口跟随，跟随鼠标移动，图片部分区域提示等都有
D3.js实现文字云效果 例子
11-01
这是一个用D3实现文字云的简单案例。可以参考，学习。如果存在不足的的地方可以优化，再跟大家分享，相互学习
js 特效 html 特效 文字飘动输出
09-03
js 特效 html 特效 文字飘动输出 js 特效 html 特效 文字飘动输出
实现波浪文字动画特效的纯JS插件
07-10
实现波浪文字动画特效的纯JS插件
js原生态随机漂浮到整个页面上的文字特效点击按钮立即归队.zip
07-04
js原生态随机漂浮到整个页面上的文字特效点击按钮立即归队
javascript js 飘浮 图片 或者 文字
天天成长的博客
03-25 538
本文引自[url]http://www.webmasters-central.com/t/floatingads.shtml[/url] 本文地址[url]http://deqiallen.iteye.com/blog/355023[/url] 进行了适当的修改 只需要将 ....放到 中即可。 [code="html"] New Document ...
全屏浮动js
weixin_30932215的博客
07-19 134
查看效果： http://www.leyikao.com 源代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head&gt...
HTML5+CSS3+JS小实例：打散文字随机浮动特效
艾恩小灰灰的博客
10-25 190
实例：打散文字随机浮动特效。技术栈：HTML+CSS+JS。
JavaScript实用实例大全：2009年更新版
《JavaScript实例集合》是一本实用的JavaScript教程，涵盖了丰富的JavaScript编程技巧和常见功能实现方法。该文档主要提供了一系列实例，适合JavaScript初学者和进阶开发者参考学习，帮助他们掌握基础到高级的编程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值