자바스크립트 oop_javascript 기술을 활용한 슬라이딩 메뉴 컨트롤 개발-JS 튜토리얼-php.cn

자바스크립트 oop_javascript 기술을 활용한 슬라이딩 메뉴 컨트롤 개발

WBOY

풀어 주다： 2016-05-16 18:20:34

원래의

1190명이 탐색했습니다.

여기서는 네이티브 자바스크립트를 사용하여 객체지향적으로 유지관리가 용이하고 사용하기 쉬운 슬라이딩 메뉴를 만들었습니다. 호출 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
var $sliding = document.getElementById("silding") 
var s1 = new Sliding(); .commands = $sliding.getElementsByTagName(" dt"); 
s1.panels = $sliding.getElementsByTagName("dd"); 
s1.init("mouseover", "active"); 
 
데모 코드 포인트 두 파일 Slide.js 및 Slide.html에 대한 코드 

를 복사합니다.

코드

 
 
javascript 슬라이드 제어 데모<br><style type="text/css">/ *reset*/ <BR>dl,ul,li,dt,dd{ margin:0; list-style:none } <BR>/*silding*/ <BR> silding{ 너비:200px; 테두리:1px 선 높이:25px; 오버플로:숨김;} <BR>.silding dt{border-bottom:1px 배경색:#bebebe; } <BR>.silding dd{ 디스플레이:없음; 배경:#efefef; hidden; 글꼴 크기:12px; } <BR>.silding .active{ 글꼴 무게:bold;} <BR></style> ; <BR>< script type="text/javascript" src="slide.js"></script> <BR></head> <BR><div id ="silding" class= "silding"> <BR><dl> <BR><dt class="active">1차 메뉴</dt><BR><dd style="display:block ;" > <BR><ul> <BR><li><a href="#">첫 번째 보조 메뉴</li> <BR><li> 보조 메뉴 1개 메뉴</li><BR></li> <BR></dd> <BR><dl> <BR><dt>2차 메뉴 <BR><dd> <BR><ul> <BR><li>2차 메뉴<BR><li> 2차 메뉴</li> 2차 메뉴</ul> <BR></dl> dl> <BR><dt>3차 메뉴</dt> <BR><dd> <BR><ul>3차 메뉴</li> ;세 번째 보조 메뉴 <BR><li> <BR></ul> <BR></dl> </style>

< /body>

slide.js:

코드 복사

코드는 다음과 같습니다.

 
function Slider(i, panelHeight) { //dto 
this.index = i; 
this.panelHeight = 패널높이; 
} 
//class Sliding { 
function Sliding(activeIndex) { 
this.commands = []; 
this.panels = []; 
this.activeIndex = activeIndex || 0; 
this.sliderCache = {}; 
} 
Sliding.prototype = { 
//绑정사건 
init: function(eventName, activeCssClass) { 
var _this = this; 
var cmds = _this.commands; 
_this.activeClass = activeCssClass; 
for (var i = 0, n = cmds.length; i < n; i ) { 
cmds[i]["on" eventName] = function(e) { 
_this.handel( 이 e); 
} 
cmds[i].index = i; 
if (i == _this.activeIndex) { 
_this.sliderCache = new Slider(i, _this.panels[i].offsetHeight); 
} 
} 
}, 
//事件处理函数 
handel: function(elem, args) { 
var _this = this; 
var index = elem.index; 
var 캐시인덱스 = _this.sliderCache.index; 
var 캐시Elem = _this.commands[cacheIndex]; 
if (인덱스 == 캐시인덱스) return; 
var showPanel = _this.panels[index]; 
var hidePanel = _this.panels[cacheIndex]; 
var h =parseInt(_this.sliderCache.panelHeight); 
showPanel.style.height = "0px"; 
showPanel.style.display = "차단"; 
_this.tween(hidePanel, showPanel, h); 
elem.className = _this.activeClass; 
cacheElem.className = 캐시Elem.className.replace(eval("/ ?" _this.activeClass " ?/"),""); 
_this.sliderCache = new Slider(index, h); 
}, 
//动画算法 
tween: function(obj0, obj1, h) { 
_this =args.callee; 
var 단계 = 20; 
if ("v" == "v") { 
단계 = 30; 
} 
if (h > 0) { 
var h0 = obj0.offsetHeight; 
var h1 = obj1.offsetHeight; 
if (h < step) { 
obj0.style.display = "none"; 
obj0.style.height = (h1 h) "px"; 
obj1.style.height = (h1 h) "px"; 
} else { 
h = h - 단계; 
obj0.style.height = (h0 - 단계) "px"; 
obj1.style.height = (h1 단계) "px"; 
setTimeout(function() { 
_this(obj0, obj1, h) 
}, 
50) 
} 
} 
} 
} 
/ /} 
 
상면就所有代码了这里因为是演示所以让HTML CSS尽weight的简化,另外使用jquery的 fn.slideUp fn.slideDown 实现起来䚚更容易不过我易为一个专业的开发많은 사람들이 JS에 대해 이야기하고 있습니다.                