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 相关文章推荐
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
javascript判断office版本示例
Apr 11 Javascript
Jquery api 速查表分享
Jan 12 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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
基于mysql的bbs设计(三)
2006/10/09 PHP
php xml-rpc远程调用
2008/12/19 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
php url路由入门实例
2014/04/23 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
js中值引用和地址引用实例分析
2019/06/21 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
文员岗位职责
2013/11/09 职场文书
学校安全教育制度
2014/01/31 职场文书
《自然之道》教学反思
2014/02/11 职场文书
《三峡》教学反思
2014/03/01 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
三人合伙协议书范本
2014/10/29 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
婚姻出轨保证书
2015/05/08 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书