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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
Javascript面向对象编程
Mar 18 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 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
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jquery 获取json数据实现代码
2009/04/27 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
异步加载script的代码
2011/01/12 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
python类继承用法实例分析
2014/10/10 Python
python django事务transaction源码分析详解
2017/03/17 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
《燕子》教学反思
2014/02/18 职场文书
银行办公室岗位职责
2014/03/10 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
英语教师个人总结
2015/02/09 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
开会通知
2015/04/20 职场文书
爱国影片观后感
2015/06/18 职场文书
公司人事管理制度
2015/08/05 职场文书
大学体育课感想
2015/08/10 职场文书
五一放假通知怎么写
2015/08/18 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
HTML中的表单元素介绍
2022/02/28 HTML / CSS