js实现鼠标点击左上角滑动菜单效果代码
这篇文章主要介绍了js实现鼠标点击左上角滑动菜单效果代码，涉及JavaScript基于鼠标事件动态变换页面元素样式的技巧，具有一定参考借鉴价值，需要的朋友可以参考下，具体如下：
这里需要鼠标点击激活的网页左上角菜单，不点击不会滑出来，可以改造成二级菜单。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-click-hd-show-menu-style-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左上角导航菜单</title>
<style type="text/css">
#pMenu0 {position:absolute; top:0px; left:30px; visibility:hidden; font-family:arial,helvetica,sans-serif; font-size:18px; font-weight:bold;}
#pMenu1 {position:absolute; top:0px; left:150px; visibility:hidden; font-family:arial,helvetica,sans-serif; font-size:18px; font-weight:bold;}
#pMenu2 {position:absolute; top:0px; left:250px; visibility:hidden; font-family:arial,helvetica,sans-serif; font-size:18px; font-weight:bold;}
</style>
<script language="javascript">
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()
var tMove=10;
var tSpeed=40
var tMoveOnScroll=true
var tShow=20
function makeMenu(obj,nest,show,move,speed){
nest=(!nest) ? "":'document.'+nest+'.'
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0;
this.x=this.css.left||this.css.pixelLeft||this.el.offsetLeft||0
this.y=this.css.top||this.css.pixelTop||this.el.offsetTop||0
this.state=1; this.go=0; this.mup=b_mup; this.show=show; this.mdown=b_mdown;
this.height=bw.ns4?this.css.document.height:this.el.offsetHeight
this.moveIt=b_moveIt; this.move=move; this.speed=speed
this.obj = obj + "Object"; eval(this.obj + "=this")
}
var px = bw.ns4||window.opera?"":"px";
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px;}
function b_mup(){
if(this.y>-this.height+this.show){
this.go=1; this.moveIt(this.x,this.y-this.move)
setTimeout(this.obj+".mup()",this.speed)
}else{this.go=0; this.state=1}
}
//Menu out
function b_mdown(){
if(this.y<eval(scrolled)){
this.go=1; this.moveIt(this.x,this.y+this.move)
setTimeout(this.obj+".mdown()",this.speed)
}else{this.go=0; this.state=0}
}
function moveTopMenu(num){
if(!oMenu[num].go){
if(!oMenu[num].state)oMenu[num].mup()
else oMenu[num].mdown()
}
for(i=0;i<oMenu.length;i++){
if(i!=num && !oMenu[i].state){ oMenu[i].mup()}
}
}
function checkScrolled(){
for(i=0;i<oMenu.length;i++){
if(!oMenu[i].go){
y=!oMenu[i].state?eval(scrolled):eval(scrolled)-oMenu[i].height+oMenu[i].show
oMenu[i].moveIt(oMenu[i].x,y)
}
}
if(bw.ns4||bw.ns6) setTimeout('checkScrolled()',40)
}
function topMenuInit(){
oMenu=new Array()
oMenu[0]=new makeMenu('pMenu0',"",tShow,tMove,tSpeed)
oMenu[1]=new makeMenu('pMenu1',"",tShow,tMove,tSpeed) //*
oMenu[2]=new makeMenu('pMenu2',"",20,10,20) //*
scrolled=bw.ns4||bw.ns6?"window.pageYOffset":"document.body.scrollTop"
for(i=0;i<oMenu.length;i++){
oMenu[i].moveIt(oMenu[i].x,-oMenu[i].height+oMenu[i].show)
oMenu[i].css.visibility='visible'
}
if(tMoveOnScroll) bw.ns4||bw.ns6?checkScrolled():window.onscroll=checkScrolled;
}
onload=topMenuInit;
</script>
<p id="pMenu0">
<!-- You can just replace this text with some cool images if you want -->
<a href="javascript://">链接一</a><br><br>
<a href="javascript://">链接二</a><br><br>
<a href="javascript://">链接三</a><br><br>
<a href="javascript://">链接四</a><br><br>
<a href="#" onclick="moveTopMenu(0); return false">菜单一</a>
</p>
<p id="pMenu1">
<!-- You can just replace this text with some cool images if you want -->
这是第二个菜单的内容<br><br>
<a href="#" onmouseover="moveTopMenu(1)">菜单二</a>
</p>
<p id="pMenu2">
<!-- You can just replace this text with some cool images if you want -->
这是第三个菜单的内容<br>
<a href="#" onclick="moveTopMenu(2); return false">菜单三</a>
</p>
</body>
</html>以上就是本章的全部内容，更多相关教程请访问JavaScript视频教程！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何使用JS和百度地图实现地图平移功能
Nov 21, 2023 am 10:00 AM
如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
PPT鼠标点击文字出现下划线动画制作方法
Mar 26, 2024 pm 06:40 PM
1、输入文字。2、选择插入下的形状，并在其中选择直线。3、在爱字下方画一条直线。4、选择直线，再选择动画菜单，从中选择一种动画效果。5、播放动画，此时文字下面没有横线。6、点击鼠标，此时文字下面就出现横线。
如何使用JS和百度地图实现地图点击事件处理功能
Nov 21, 2023 am 11:11 AM
如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：
如何使用JS和百度地图实现地图热力图功能
Nov 21, 2023 am 09:33 AM
如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP
使用CSS实现响应式滑动菜单的教程
Nov 21, 2023 am 08:08 AM
使用CSS实现响应式滑动菜单的教程，需要具体代码示例在现代网页设计中，响应式设计成为了一个必备的技能。为了适应不同的设备和屏幕尺寸，我们需要为网站添加一个响应式菜单。今天，我们将使用CSS来实现一个响应式的滑动菜单，并为您提供具体的代码示例。首先，让我们来看一下实现效果。我们将创建一个导航栏，当屏幕宽度小于一定阈值时，会自动折叠起来，并通过点击菜单按钮展开。
