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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
详解AngularJS控制器的使用
Mar 09 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
jQuery实现简单聊天室
2020/02/08 jQuery
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Windows下安装Scrapy
2018/10/17 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
企业文化建设实施方案
2014/03/22 职场文书
学生吸烟检讨书
2014/09/14 职场文书
2015年采购员工作总结
2015/04/27 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
mysql脏页是什么
2021/07/26 MySQL