Node.js는 왼쪽 상단에 마우스 클릭 슬라이딩 메뉴 효과 코드를 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Node.js는 왼쪽 상단에 마우스 클릭 슬라이딩 메뉴 효과 코드를 구현합니다.

May 16, 2016 pm 03:40 PM

js 슬라이딩 메뉴 마우스 클릭

이 글에서는 마우스 왼쪽 상단에 슬라이딩 메뉴 효과를 구현하는 js 코드를 주로 소개합니다. 이는 마우스 이벤트를 기반으로 페이지 요소의 스타일을 동적으로 변경하는 JavaScript 기술을 포함합니다. 자세한 내용은 다음과 같습니다.

여기서 마우스를 클릭하면 웹페이지 왼쪽 상단에 있는 메뉴가 활성화됩니다. 클릭하지 마세요. 보조 메뉴로 전환될 수 있습니다.

실행 중인 효과의 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

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

구체 코드는 다음과 같습니다.

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

로그인 후 복사

위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.