滑动拉开效果
在网页上有123三列。例如：第一列：1、“软件/网站”开发。第二列：2、“软件维护”。第三列：3、“软件外包”。
当鼠标放在第二列“2、软件维护”时，“2、软件维护”有一个展开的效果，也就是变宽了，同时后面出现一张图片，字体变为蓝色。而当鼠标放在第三列“3、软件外包”时，第二列则收了起来，第三列展开。默认情况下，展开的是第一列。
请问怎样实现比较好，JS还是AJAX？有没有实例或是源码可供参考？ --------------------编程问答-------------------- js应该可以做吧 --------------------编程问答-------------------- C# 怎么对chunked + gzip的 HTTP响应头解码？
哪位大哥能给我一个C#的实例呀。 --------------------编程问答--------------------
/*
功能：滑动门效果封装类
作者：老胡
日期：2010-06-29
*/
function __AccordingClass()
{
this.isMultiExpand = false; // 是否允许多个同时展开
this.expandClassName =''; // 内容展开后的，头类名称
this.foldedClassName =''; // 内容折叠后的，头类名称
this.speedTime = 5 ; // 展开折叠速度 ，隔多少毫秒执行一次
this.speedCount=10 ; // 展开折叠渐变次数，多少次完成展开折叠
this.defaultExpandIndex = 0; // 默认展开的索引
var isIE = document.all?true:false;
var according=[]; //
var obj = null;
var accordingPan =function()
{
this.isExpand = true;
this.maxHeight=0;
this.timer=null;
this.header=null;
this.content = null;
};
this.initAccording = function(headerList,contentList,exClassName,fdClassName)
{
if(headerList&&contentList&&headerList!=null&&contentList!=null&&headerList.length>0&&headerList.length==contentList.length){
obj = this;
for(var i=0;i<headerList.length;i++)
{
according[i] = new accordingPan();
according[i].maxHeight = contentList[i].offsetHeight;
according[i].header = headerList[i];
according[i].content = contentList[i];
according[i].content.style.overflow='hidden';
if(exClassName&&exClassName!=null&&exClassName!='')obj.expandClassName = exClassName;
if(fdClassName&&fdClassName!=null&&fdClassName!='')obj.expandClassName = fdClassName;
obj.bindEvent(i);
}
if(!obj.isMultiExpand)
{
obj.expandFolded(obj.defaultExpandIndex);
}
}
};
this.bindEvent = function(i)
{
if(window.addEventListener){
according[i].header.addEventListener('click', function(e){ obj.expandFolded(i); },false);
}else{
according[i].header.attachEvent("onclick",function(){ obj.expandFolded(i); });
}
};
this.expandFolded = function(i)
{
if( according[i].isExpand)
{
if(obj.isMultiExpand)
{
clearInterval(according[i].timer);
according[i].timer=setInterval(function(){obj.folded(i);},obj.speedTime);
}else{
for(var j=0;j<according.length;j++){
if(i!=j)obj.toFolded(j);
}
}
}
else
{
clearInterval(according[i].timer);
according[i].content.style.display='';
according[i].timer=setInterval(function(){obj.expand(i);},obj.speedTime);
if(!obj.isMultiExpand)
{
for(var j=0;j<according.length;j++){
if(i!=j)obj.toFolded(j);
}
}
}
};
this.toFolded = function(i){
clearInterval(according[i].timer);
according[i].timer=setInterval(function(){obj.folded(i);},obj.speedTime);
};
this.expand=function(i)
{
var h = according[i].content.offsetHeight;
if(h<according[i].maxHeight)
{
var v = Math.round((according[i].maxHeight-h)/obj.speedCount);
v = (v<1) ? 1 :v ;
v+=h;
according[i].content.style.height=( v)+'px';
if(isIE){
according[i].content.style.filter= 'alpha(opacity='+(v*100/according[i].maxHeight)+');';
}else{
according[i].content.style.opacity = (v/according[i].maxHeight);
}
}else{
if(obj.expandClassName !='') according[i].header.className = obj.expandClassName ;
according[i].content.style.height=according[i].maxHeight +'px';
according[i].isExpand = true;
clearInterval(according[i].timer);
}
};
this.folded=function(i)
{
var h = according[i].content.offsetHeight;
if(h> 0)
{
var v = Math.round(h/obj.speedCount);
v = (v<1) ? 1 :v ;
according[i].content.style.height=(h - v)+'px';
if(isIE){
according[i].content.style.filter= 'alpha(opacity='+(v*100/according[i].maxHeight)+');';
}else{
according[i].content.style.opacity = (v/according[i].maxHeight);
}
}else{
if(obj.foldedClassName !='') according[i].header.className = obj.foldedClassName ;
according[i].content.style.height='0px';
according[i].content.style.display='none';
according[i].isExpand = false;
clearInterval(according[i].timer);
}
}
}
--------------------编程问答--------------------
<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>首页</title>
</head>
<body>
<div style="width:300px;" id="div_MemberManagerMenu">
<div class="div_MemberManagerMenuItem" >
<h6>天使宝宝1</h6>
<ul>
<li> <a href='' >09.3.25 胡乐天</a></li>
<li><a href='' >09.3.30李泽铨</a></li>
<li><a href='' >09.5.20周旭</a></li>
</ul>
</div>
<div class="div_MemberManagerMenuItem" >
<h6>天使宝宝2</h6>
<ul>
<li><a href='' >09.6.10宋周雨佳</a></li>
<li><a href='' >09.6.19魏力新</a></li>
<li><a href='' >09.3.30李泽铨</a></li>
<li><a href='' >09.5.20周旭</a></li>
</ul>
</div>
<div class="div_MemberManagerMenuItem" >
<h6>天使宝宝3</h6>
<ul>
<li><a href='' >09.3.30李泽铨</a></li>
<li><a href='' >09.5.20周旭</a></li>
<li><a href='f' >09.6.19魏力新</a></li>
<li><a href='' >09.3.30李泽铨</a></li>
</ul>
</div>
<div class="div_MemberManagerMenuItem" >
<h6>天使宝宝4</h6>
<ul>
<li><a href='' >09.6.19魏力新</a></li>
<li><a href='' >09.3.30李泽铨</a></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript" src="/JS/According.js" charset='utf-8'></script>
<script type="text/javascript">
var $ = function (id,obj) {
obj = obj|| document;
return "string" == typeof id ? obj.getElementById(id) : id;
};
var $$ = function (name,obj) {
obj = obj|| document;
return "string" == typeof name ? obj.getElementsByTagName(name) : name;
};
(function(){
var mainMenu = $("div_MemberManagerMenu");
var according = new __AccordingClass();
//according.isMultiExpand = true; // 设置true,可以同时展开多个，false 只有一个处于展开状态
according.initAccording( $$("h6",mainMenu), $$("ul",mainMenu));
})();
</script>
</html>
酷，敢问各位JS可以封装成类吗？ --------------------编程问答-------------------- 为什么是62分？杭州人？ --------------------编程问答-------------------- 用JQuery实现、。 --------------------编程问答--------------------
JQuery如何实现，能详细的解释下不，各位？
--------------------编程问答-------------------- 你也下载锋利的jquery源码下载地址： http://www.zw97.com/soft/5826.html 里面都是你可以学习 --------------------编程问答--------------------
up --------------------编程问答-------------------- 有没有“jquery源码实例”可以参考呢？
补充：.NET技术 , ASP.NET
