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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
jQuery实现本地存储
Dec 22 jQuery
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中一些可能会被忽略的问题
2013/06/21 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python实现批量修改文件名代码
2017/09/10 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
智能旅行箱:Horizn Studios
2018/04/30 全球购物
大学生学习生活的自我评价
2013/11/01 职场文书
党委书记岗位职责
2013/11/24 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
蜗居观后感
2015/06/11 职场文书
世界名著读书笔记
2015/06/25 职场文书
合同补充协议书
2016/03/24 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL