js melaksanakan kod kesan menu gelongsor klik tetikus di penjuru kiri sebelah atas-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

js melaksanakan kod kesan menu gelongsor klik tetikus di penjuru kiri sebelah atas

May 16, 2016 pm 03:40 PM

js menu gelongsor klik tetikus

Artikel ini terutamanya memperkenalkan kod js untuk melaksanakan kesan menu gelongsor di sudut kiri atas tetikus Ia melibatkan teknik JavaScript mengubah gaya elemen halaman secara dinamik Ia mempunyai nilai rujukan tertentu yang memerlukannya boleh merujuknya. Butirannya adalah seperti berikut:

Di sini anda perlu mengklik tetikus untuk mengaktifkan menu di sudut kiri atas halaman web. t kliknya Ia boleh diubah menjadi menu kedua.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http: //demo.jb51.net/ js/2015/js-click-hd-show-menu-style-codes/

Kod khusus adalah seperti berikut:

&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;

Salin selepas log masuk

Di atas adalah keseluruhan kandungan bab ini, lebih berkaitan Untuk tutorial, sila lawati Tutorial Video JavaScript!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn