Heim >Web-Frontend >js-Tutorial >js implementiert den Mausklick-Schiebemenüeffektcode in der oberen linken Ecke
js implementiert den Mausklick-Schiebemenüeffektcode in der oberen linken Ecke
- PHPznach vorne
- 2016-05-16 15:40:271214Durchsuche
In diesem Artikel wird hauptsächlich der JS-Code zum Implementieren des Schiebemenüeffekts in der oberen linken Ecke vorgestellt. Dabei handelt es sich um die Technik, mit der JavaScript den Stil von Seitenelementen basierend auf Mausereignissen ändert Wer es braucht, kann darauf zugreifen:
Hier müssen Sie mit der Maus klicken, um das Menü in der oberen linken Ecke der Webseite zu aktivieren. Es wird nicht herausgeschoben, wenn Sie es nicht benötigen. Wenn Sie darauf klicken, kann es in ein sekundäres Menü umgewandelt werden.
Ein Screenshot des Laufeffekts lautet wie folgt:
Die Online-Demo-Adresse lautet wie folgt:
http: //demo.jb51.net/ js/2015/js-click-hd-show-menu-style-codes/
Die spezifischen Codes lauten wie folgt:
<!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">
#pMenu0 {position:absolute; top:0px; left:30px; visibility:hidden; font-family:arial,helvetica,sans-serif; font-size:18px; font-weight:bold;}
#pMenu1 {position:absolute; top:0px; left:150px; visibility:hidden; font-family:arial,helvetica,sans-serif; font-size:18px; font-weight:bold;}
#pMenu2 {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('pMenu0',"",tShow,tMove,tSpeed)
oMenu[1]=new makeMenu('pMenu1',"",tShow,tMove,tSpeed) //*
oMenu[2]=new makeMenu('pMenu2',"",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>
<p id="pMenu0">
<!-- 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>
</p>
<p id="pMenu1">
<!-- You can just replace this text with some cool images if you want -->
这是第二个菜单的内容<br><br>
<a href="#" onmouseover="moveTopMenu(1)">菜单二</a>
</p>
<p id="pMenu2">
<!-- You can just replace this text with some cool images if you want -->
这是第三个菜单的内容<br>
<a href="#" onclick="moveTopMenu(2); return false">菜单三</a>
</p>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Kapitels, weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!
Stellungnahme：
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen