js 클릭 하여 팝 업 왼쪽 숨 기기 메뉴
펼 치기 전:
펼 친 후:
원 리 는 왼쪽 margin 을 설정 하여 메뉴 의 표시 숨 김 을 제어 하 는 것 입 니 다.
원본 코드:
<html>
<head>
<title>SlideBar</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<style type="text/css">
#menuBar {
position: absolute;
left: -200px;
width: 226px;
top: 0px;
clip: rect()
}
#glider {
position: absolute;
left: 210px;
top: 0px;
width: 80px
}
.glideText {
font-size: 18px;
color: #E2E2E2;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif
}
#glidetextLink {
background: url(images/sidebar_icon.png) 0 0 no-repeat;
width: 26px;
height: 80px;
cursor:pointer;
}
</style>
<script language="JavaScript">
var pee = -200
var drec = 40;
var speed = 20;
var l = pee;
//This is the function that closes the menu
function Proj7GlideBack() {
l += drec;
document.getElementById('menuBar').style.left = l + 'px';
if (l < 0){
setTimeout('Proj7GlideBack()', speed);//setTimeout
} else {
document.getElementById('glidetextLink').onclick = moveIn;
}
}
//This is the function that opens the menu
function Proj7GlideOut() {
l -= drec;
document.getElementById('menuBar').style.left = l + 'px';
if (l > pee){
setTimeout('Proj7GlideOut()', speed);
} else {
document.getElementById('glidetextLink').onclick = moveOut;
}
}
function moveIn() {
Proj7GlideOut();
return false;
}
function moveOut() {
Proj7GlideBack();
return false;
}
<!--NNresizeFix Reloads the page to workaround a Netscape Bug-->
if (document.layers) {
origWidth = innerWidth;//innerWidth - ( ， )
origHeight = innerHeight;
}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}
if (document.layers)
onresize = reDo;
</script>
<div ID="menuBar" style="">
<div style="width:226px; height:80px;background: #fff000">test</div>
<span ID="glider" style="">
<div id="glidetextLink" href="javascript:;" class="glideText"
onClick="Proj7GlideBack(); return false" onFocus="if(this.blur)this.blur()">
</div>
</span>
</div>
</body>
</html>참고:http://www.webdm.cn/webcode/dec2a8ba-9c04-4dca-b071-472773a3d898.html
원본 코드:https://github.com/cc1218/TestSlideMenu
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
