js implementiert den Mausklick-Schiebemenüeffektcode in der oberen linken Ecke-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

js implementiert den Mausklick-Schiebemenüeffektcode in der oberen linken Ecke

May 16, 2016 pm 03:40 PM

js Schiebemenü 鼠标点击

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:

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;左上角导航菜单&lt;/title&gt;
 &lt;style type=&quot;text/css&quot;&gt;
#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;} 
&lt;/style&gt;
&lt;script language=&quot;javascript&quot;&gt;
function lib_bwcheck(){ //Browsercheck (needed)
 this.ver=navigator.appVersion
 this.agent=navigator.userAgent
 this.dom=document.getElementById?1:0
 this.opera5=this.agent.indexOf(&quot;Opera 5&quot;)&gt;-1
 this.ie5=(this.ver.indexOf(&quot;MSIE 5&quot;)&gt;-1 &amp;&amp; this.dom &amp;&amp; !this.opera5)?1:0; 
 this.ie6=(this.ver.indexOf(&quot;MSIE 6&quot;)&gt;-1 &amp;&amp; this.dom &amp;&amp; !this.opera5)?1:0;
 this.ie4=(document.all &amp;&amp; !this.dom &amp;&amp; !this.opera5)?1:0;
 this.ie=this.ie4||this.ie5||this.ie6
 this.mac=this.agent.indexOf(&quot;Mac&quot;)&gt;-1
 this.ns6=(this.dom &amp;&amp; parseInt(this.ver) &gt;= 5) ?1:0; 
 this.ns4=(document.layers &amp;&amp; !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) ? &quot;&quot;:&#39;document.&#39;+nest+&#39;.&#39;
 this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+&#39;document.&#39;+obj):0;
  this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+&#39;document.&#39;+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 + &quot;Object&quot;;  eval(this.obj + &quot;=this&quot;) 
}
var px = bw.ns4||window.opera?&quot;&quot;:&quot;px&quot;;
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&gt;-this.height+this.show){
  this.go=1; this.moveIt(this.x,this.y-this.move)
  setTimeout(this.obj+&quot;.mup()&quot;,this.speed)
 }else{this.go=0; this.state=1} 
}
//Menu out
function b_mdown(){
 if(this.y&lt;eval(scrolled)){
  this.go=1; this.moveIt(this.x,this.y+this.move)
  setTimeout(this.obj+&quot;.mdown()&quot;,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&lt;oMenu.length;i++){
  if(i!=num &amp;&amp; !oMenu[i].state){ oMenu[i].mup()}
 }
}
function checkScrolled(){
 for(i=0;i&lt;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(&#39;checkScrolled()&#39;,40)
}
function topMenuInit(){
 oMenu=new Array()
 oMenu[0]=new makeMenu(&#39;pMenu0&#39;,&quot;&quot;,tShow,tMove,tSpeed) 
 oMenu[1]=new makeMenu(&#39;pMenu1&#39;,&quot;&quot;,tShow,tMove,tSpeed) //*
 oMenu[2]=new makeMenu(&#39;pMenu2&#39;,&quot;&quot;,20,10,20) //*
 scrolled=bw.ns4||bw.ns6?&quot;window.pageYOffset&quot;:&quot;document.body.scrollTop&quot;
 for(i=0;i&lt;oMenu.length;i++){
  oMenu[i].moveIt(oMenu[i].x,-oMenu[i].height+oMenu[i].show)
  oMenu[i].css.visibility=&#39;visible&#39;
 }
 if(tMoveOnScroll) bw.ns4||bw.ns6?checkScrolled():window.onscroll=checkScrolled;
}
onload=topMenuInit;
&lt;/script&gt;
&lt;p id=&quot;pMenu0&quot;&gt;
 &lt;!-- You can just replace this text with some cool images if you want --&gt;
 &lt;a href=&quot;javascript://&quot;&gt;链接一&lt;/a&gt;&lt;br&gt;&lt;br&gt;
 &lt;a href=&quot;javascript://&quot;&gt;链接二&lt;/a&gt;&lt;br&gt;&lt;br&gt;
 &lt;a href=&quot;javascript://&quot;&gt;链接三&lt;/a&gt;&lt;br&gt;&lt;br&gt;
 &lt;a href=&quot;javascript://&quot;&gt;链接四&lt;/a&gt;&lt;br&gt;&lt;br&gt;
 &lt;a href=&quot;#&quot; onclick=&quot;moveTopMenu(0); return false&quot;&gt;菜单一&lt;/a&gt;
&lt;/p&gt;
&lt;p id=&quot;pMenu1&quot;&gt;
 &lt;!-- You can just replace this text with some cool images if you want --&gt;
 这是第二个菜单的内容&lt;br&gt;&lt;br&gt;
 &lt;a href=&quot;#&quot; onmouseover=&quot;moveTopMenu(1)&quot;&gt;菜单二&lt;/a&gt;
&lt;/p&gt;
&lt;p id=&quot;pMenu2&quot;&gt;
 &lt;!-- You can just replace this text with some cool images if you want --&gt;
 这是第三个菜单的内容&lt;br&gt;
 &lt;a href=&quot;#&quot; onclick=&quot;moveTopMenu(2); return false&quot;&gt;菜单三&lt;/a&gt;
&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Kapitels, weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn