用js简单实现悬浮标题时，对应的内容（图片，文字）切换，超简单的js代码

桃扇骨 2023-06-12 04:15 14阅读 0赞

## js实现悬浮标题时，对应的内容（图片，文字）切换 ##

**HTML主要代码如下**

<div id="mainbox">
    
    <div id="menu1box" class="menu1box">
    	<ul id="menus1" class="menu01">
    		<li class="hover" onmouseover="setTab(1,0)">
    		<a href="#"><h3>产品介绍</h3></a>
    		</li>
    		<li  onmouseover="setTab(1,1)">
    		<a href="#"> <h3>新闻快讯</h3></a>
    		</li>
    		<li  onmouseover="setTab(1,2)">
    		<a href="#"> <h3>科研学术</h3></a>
    		</li>
    	</ul>
    </div>
    
    <div class="main1box">
    <div class="main1" id="main1">
    
    <ul  class="block">
    <li>
    <dl>
    <dd><a href="#" target="_blank">js简单实现悬浮标题时，对应的内容（图片，文字）切换
    </a></dd> 
    </dl>
    </li>
    </ul>
    
    <ul>
    <li>
    <dl>
    <dd><a href="#" target="_blank">overflow 属性规定当内容溢出元素框时发生的事情
    </a></dd>
    </dl>
    </li>
    </ul>
    
    <ul>
    <li>
    <dl>
    <dd><a href="#" target="_blank">所有主流浏览器都支持 overflow 属性
    </a></dd>
    </dl>
    </div>
    </li>
    </ul>
    </div>
    </div>

**解读**  
1.HTML代码主要分为两个div盒子，一个控制标题，一个控制内容的显示与遮盖  
2.  
one： <ul *id=“menus1”* class=“menu01”>  
<li *class=“hover”* οnmοuseοver=“setTab(1,0)”>

two： <div class=“main1” *id=“main1”*>  
<ul *class=“block”*>

**拓展**：οnmοuseοver=" "表示 当鼠标指针移动到元素上时执行一段 JavaScript：，onmouseover 属性在鼠标指针移动到元素上时触发。  
这个就是实现悬浮标题的关键

**JS代码如下：**

**解读：**  
1.  
主要就是  
var 变量名 = document.getElementById(“id”).getElementsByTagName(“元素”);————通用格式：document对象getElementsByTagName("")方法  
getElementById 是通过id来获取元素，id在HTML中是唯一的，所以获取到的只有一个元素。

getElementsByTagNam 是通过标签名来获取元素，一种标签在HTML中可以有多个，所以获取到的是多个元素，且返回是以集合的形式返回。

getElementsByClassName 是通过类名来获取元素，同名的类在HTML中也能存在多个，所以获取到的也是多个元素，同样是以集合的形式返回

tli.length：获取li元素的个数

当i=n时，分别显示对应的css样式，block显示；none遮盖，不显示

**CSS代码如下**

*{ border:0px;padding:0px;margin:0px;}
    body{ font-size:12px;font-family:"宋体";background:#fff; margin: 0px auto}
    ul{ list-style-type: none}
    li{ list-style-type: none}
    a{ text-decoration: none; color: #656464}
    a:hover{ color:#095d40}
    		
    #mainbox { overflow: hidden; margin-bottom: 20px; height: 303px; width: 328px;}
    .menu1box { overflow: hidden; height: 75px; position: relative;}
    .menu01 { height: 75px; width: 280px; position: absolute; left: 0px; z-index: 1; top: 0px;}	
    .menu01 li { overflow: hidden; height:75px;width:93px;float: left; line-height:75px;}
    .menu01 li h3 { cursor: pointer; font-size: 18px; height: 46px; font-family: "微软雅黑"; width: 93px; float: left; font-weight: normal; text-align: center; margin-top: 15px; line-height: 46px;}
    .menu01 .hover h3 { height: 42px; width: 93px; font-weight: normal; color: #fff; text-align: center; margin-top: 15px; line-height: 42px; background-color: #0e8b61;}
    		
    .main1box { overflow: hidden; width: 328px; clear: both;}
    .main1box ul { display: none;}
    .main1box ul.block { display: block;}
    .main1box ul li { height: 235px; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px; padding-right: 0px;}
    dl dd { background: url("images/li_bg.jpg"//一个小于号标志的png图片，可自己寻找) no-repeat left center; padding-left: 14px; margin-left: 4px; line-height: 26px;}" dl dd a { font-size: 14px; color: #4c4c4c; line-height: 30px;}

**解读：**

1.      根据自身需要，有些css样式可以去掉、自行修改，在这里我暂时不予修改
2.  overflow: hidden;  
    overflow 属性规定当内容溢出元素框时发生的事情  
    *hidden 内容会被修剪，并且其余内容是不可见的。*  
    visible 默认值。内容不会被修剪，会呈现在元素框之外。  
    scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。  
    auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。  
    inherit 规定应该从父元素继承 overflow 属性的值。
3.  设置行高line-height与高度height相等，可以使得文字，内容垂直居中对齐
4.  特别注意：在这里的\*\*.menu01 li h3**与**.menu01 .hover h3\*\*中css样式的区别，这是为了接下来实现标题悬浮的一个伏笔。通过对第一个li元素设置一个class：hover，并添加一个background-color，使得在js代码中，用循环的方式来让.hover也进行相应的循环，从而实现该效果。  
    同理，内容也是如此。（具体效果自己实践可知）

说明：本人正在学习js，如有错误，请多指正！  
推荐书籍————web前端开发技术实验与实践（第3版）  
本案例主要来自该书籍