|
这里使用原生的javascript，用面向对象的方式创建一个容易维护使用方便的滑动菜单，调用方式如下： var $sliding = document.getElementById("silding");
var s1 = new Sliding(); s1.commands = $sliding.getElementsByTagName("dt"); s1.panels = $sliding.getElementsByTagName("dd"); ; s1.init("mouseover", "active"); 演示代码分为slide.js和slide.html两个文件 slide.htm:   代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript slide控件演示</title> <style type="text/css"> /*reset*/ dl,ul,li,dt,dd{ margin:0; padding:0; list-style:none; } /*silding*/ .silding{ width:200px; border:1px solid #ccc; line-height:25px; overflow:hidden;} .silding dt{border-bottom:1px solid #ccc; background-color:#bebebe; cursor:pointer} .silding dd{ display:none; background:#efefef; overflow:hidden; font-size:12px; } .silding .active{ font-weight:bold;} </style> <script type="text/javascript" src="slide.js"></script> </head> <body> <div id="silding" class="silding"> <dl> <dt class="active">第一个一级菜单</dt> <dd style="display:block;"> <ul> <li><a href="#">第一个二级菜单</a></li> <li>第一个二级菜单</li> <li>第一个二级菜单</li> </ul> </dd> </dl> <dl> <dt>第二个一级菜单</dt> <dd> <ul> <li>第二个二级菜单</li> <li>第二个二级菜单</li> <li>第二个二级菜单</li> </ul> </dd> </dl> <dl> <dt>第三个一级菜单</dt> <dd> <ul> <li>第三个二级菜单</li> <li>第三个二级菜单</li> <li>第三个二级菜单</li> </ul> </dd> </dl> </div> <script type="text/javascript"> var $sliding = document.getElementById("silding"); var s1 = new Sliding(); s1.commands = $sliding.getElementsByTagName("dt"); s1.panels = $sliding.getElementsByTagName("dd"); ; s1.init("mouseover", "active"); </script> </body> </html> slide.js: 代码
function Slider(i, panelHeight) { //dto this.index = i; this.panelHeight = 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(this, 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 cacheIndex = _this.sliderCache.index; var cacheElem = _this.commands[cacheIndex]; if (index == cacheIndex) return; var showPanel = _this.panels[index]; var hidePanel = _this.panels[cacheIndex]; var h = parseInt(_this.sliderCache.panelHeight); showPanel.style.height = "0px"; showPanel.style.display = "block"; _this.tween(hidePanel, showPanel, h); elem.className = _this.activeClass; cacheElem.className = cacheElem.className.replace(eval("/ ?"+_this.activeClass+" ?/"),""); _this.sliderCache = new Slider(index, h); }, //动画算法 tween: function(obj0, obj1, h) { _this = arguments.callee; var step = 20; if ("\v" == "v") { step = 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 - step; obj0.style.height = (h0 - step) + "px"; obj1.style.height = (h1 + step) + "px"; setTimeout(function() { _this(obj0, obj1, h) }, 50) } } } } //} 上面就所有代码了这里因为是演示所以让HTML CSS尽量的简化，另外使用jquery的 fn.slideUp fn.slideDown 实现起来会更容易不过我作为一个专业的开发者多了解些原生的JS对技术的提高还是很有帮助。 (责任编辑：admin) |