登陆 注册

javascript做一个菜单栏提示框

守望者 2020-04-11 160人围观 ,发现0个评论 javascript

     用javascript做一个菜单栏提示框,实现当鼠标悬浮在某个菜单项上时,显示出该菜单项的对应信息,效果图如下:

QQ截图20200411145401.png

html部分:


用无序列表项放置菜单栏,其中包括四个菜单项,

当然,里面也可以放上超链接实现点击跳转:


                <ul>
            <li title="百度搜索">百度搜索</li>
            <li title="新浪网">新浪网</li>
            <li title="搜狐新闻">搜狐新闻</li>
            <li title="爱奇艺">爱奇艺</li>
        </ul>


CSS部分:


   p.title就是文本中的“灰色提示框”,下面设置下背景色,前景色,字体,缩进等样式:


 p.title{
         	background-color: gray;
         	color: red;
         	/*padding: 10px 20px;*/
         	width:100px;
         	height: 30px;
         	font-size: 20px;
         	padding: 5px 10px;
         	text-align: center;
         }


javascript  customTitle()  函数部分:


   参数tags:  li元素数组;


       遍历tags数组,新建一个p元素,初始化内容和类属性,定位绝对布局:

for(var i=0;i<tags.length;i++){
        		
        		var p = document.createElement("p");
        		p.innerText = tags[i].title;
        		p.className = "title";
        		p.style.position = "absolute";
       ...  }


    将tags[i]定义相对布局,p元素赋给tags[i]的全局变量:

                                tags[i].removeAttribute("title");
        		tags[i].style.position = "relative";
        		tags[i].p = p;


    为tags[i]添加鼠标监听,当鼠标悬浮至上空时,在tags[i]元素内放上p元素;

tags[i].onmouseover = function(e){
        			var o = e.target;
        			o.appendChild(o.p);
        		}


 为tags[i]添加鼠标监听,当鼠标移开时,在tags[i]元素内移除p元素;

tags[i].onmouseout = function(e){
        			var o = e.target;
        			o.removeChild(o.p);
        		}


 为tags[i]添加鼠标监听,当鼠标在tags[i]内移动时,实时更新p元素的定位:

tags[i].onmousemove = function(e){
        			 var x = e.offsetX+10;
        			 var y = e.offsetY+10;
        			 var o = e.target;
        			 o.p.style.left = x+"px";
        			 o.p.style.top = y+"px";
        		};


本文实例代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 
     <style>
        
        ul{
        	margin: 0;
        	padding: 0;
        	margin-left: 200px;
        	margin-top: 200px;
        	/*overflow: hidden;*/
        }
        ul li{
        	background: red;
        	list-style: none;
        	height: 30px;
        	line-height: 30px;
        	float: left;
        	padding: 10px;
        	/*margin: 0 10px;*/
        }
         ul li:hover{
         	text-decoration: underline;
         	cursor: pointer;
         	}
         
         p.title{
         	background-color: gray;
         	color: red;
         	/*padding: 10px 20px;*/
         	width:100px;
         	height: 30px;
         	font-size: 20px;
         	padding: 5px 10px;
         	text-align: center;
         }
     </style>
    
    <script>
        
        function customTile(tags){
        	
        	for(var i=0;i<tags.length;i++){
        		
        		var p = document.createElement("p");
        		p.innerText = tags[i].title;
        		p.className = "title";
        		p.style.position = "absolute";
        	
        		tags[i].removeAttribute("title");
        		tags[i].style.position = "relative";
        		tags[i].p = p;
        		
        		tags[i].onmouseover = function(e){
        			var o = e.target;
        			o.appendChild(o.p);
        		}
        		
        		tags[i].onmouseout = function(e){
        			var o = e.target;
        			o.removeChild(o.p);
        		}
        		
        		tags[i].onmousemove = function(e){
        			 var x = e.offsetX+10;
        			 var y = e.offsetY+10;
        			 var o = e.target;
        			 o.p.style.left = x+"px";
        			 o.p.style.top = y+"px";
        		};
        	}
        }
       
       window.onload = function(){
       	 var lis  = document.getElementsByTagName("li");
       	 customTile(lis);
       }
        
    </script>
    
    </head>
    
    <body>
        
        <ul>
            <li title="百度搜索">百度搜索</li>
            <li title="新浪网">新浪网</li>
            <li title="搜狐新闻">搜狐新闻</li>
            <li title="爱奇艺">爱奇艺</li>
        </ul>
    </body>
    
</html>


    转载请附上本文链接:https://tufeng.xyz/javascript/46.html,谢谢合作!

请发表您的评论
请关注微信公众号
微信二维码