js实现鼠标点击左上角滑动菜单效果代码


Posted in Javascript onSeptember 06, 2015

本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码。分享给大家供大家参考。具体如下:

这里需要鼠标点击激活的网页左上角菜单,不点击不会滑出来,可以改造成二级菜单。

运行效果截图如下:

js实现鼠标点击左上角滑动菜单效果代码

在线演示地址如下:

具体代码如下:

<!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">
#divMenu0 {position:absolute; top:0px; left:30px; visibility:hidden; font-family:arial,helvetica,sans-serif; font-size:18px; font-weight:bold;}
#divMenu1 {position:absolute; top:0px; left:150px; visibility:hidden; font-family:arial,helvetica,sans-serif; font-size:18px; font-weight:bold;}
#divMenu2 {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('divMenu0',"",tShow,tMove,tSpeed) 
 oMenu[1]=new makeMenu('divMenu1',"",tShow,tMove,tSpeed) //*
 oMenu[2]=new makeMenu('divMenu2',"",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>
<div id="divMenu0">
 <!-- 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>
</div>
<div id="divMenu1">
 <!-- You can just replace this text with some cool images if you want -->
 这是第二个菜单的内容<br><br>
 <a href="#" onmouseover="moveTopMenu(1)">菜单二</a>
</div>
<div id="divMenu2">
 <!-- You can just replace this text with some cool images if you want -->
 这是第三个菜单的内容<br>
 <a href="#" onclick="moveTopMenu(2); return false">菜单三</a>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 #Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 #Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 #Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 #Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 #Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 #Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 #Javascript
You might like
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
基于Python闭包及其作用域详解
2017/08/28 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
Django自带的用户验证系统实现
2020/12/18 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
会计电算化专业求职信
2014/06/10 职场文书
Django分页器的用法你都了解吗
2021/05/26 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android